Widgets in WooCommerce
In our latest WooCommerce plugin update, you can can now add any of your widgets to your theme without having to touch your theme or functions.php files!
Adding a Widget
- You can display a widget directly to the page, or within one of the tabs in a single product (if your theme support this). Tabs are particularly handy for adding Product Reviews and Feedback.
Firstly, you'll need to click on "Get widget code" on any Conversio widget you want to add, and copy the shortcode (e.g. [rf_reviews slug="Recent-0"] ).
Go to your store's admin panel and go to WooCommerce > Settings > Conversio and scroll to Widgets. Paste in the shortcode to the Shortcode.
Next you're going to choose where you'd like to the shortcode to appear. You'll find a number of places for the widget to appear directly on pages, plus custom places and New Tab.
Select then add another by clicking Add Widget, or click Save.
Widget placement and priority
Each Woocommerce/WordPress theme has its own settings for the position of each of its components (like the title, the price etc) within a layout. Thich means that when you're placing widgets within a theme, the widget may not appear exactly where you've set it.
Our positioning setup is based on the default WooCommerce component position, so we've provided the "Priority" changer to allow you to manually tweak the position.
- Let's say I've added a summary widget, and I want it to appear after the title. I've added it like this:
When I've checked the theme, it's appearing below the price, not the title, so we need to use the priority changer to fix it.
In the priority box, increase or decrease to change its position. Increase the number to place it further down the page and decrease it to place it closer. Since my summary review is after the price, I'll decrease the number to get it closer the to the title, and I'll change it to 9 in the priority box.
Now I save it with these settings and check again, it's worked! Now it's just below the title.
If you've changed the priority a few times and can't work it out, you can install use this third party WordPress plugin to help you work out what the priority should be (Yes, it says it's not tested with current WP versions, it works just fine). Install it and activate it.
While logged in, navigate to the type of page where you want the widget to appear (i.e. a single product page or a category page). From the admin bar, select "Woo Visual Hook Guide".
On a single product page, locate the woocommerce_single_product_summary outlined in orange (known as a hook) then click on it.
This spreadsheet will help you choose which hook to click on to locate the priorities if you're not sure which one to click on.
This will show you the priority of each of the page parts. In this example, Here we can see that the priority of the title is 5, and the price is 10. If you want to insert your widget between the title and the price, make the priority any value from 6-9. If you'd like it to be before the title, you can have any number 1-5.
Close the visual hook guide, return to the widget settings in Conversio, and add your updated priority.
Inserting your widget with a custom hook
If you're familiar with hooks and you want to display your widget elsewhere, you can use the "Custom" option for widget placement. Simply add the hook name where you'd like to place the widget, and adjust the priority if you need to.
Disabling WooCommerce's own Product Reviews
- In your WordPress admin panel, go to WooCommerce > Settings > Products and scroll down to Reviews.
Uncheck "Enable product reviews" and click Save.
Your review settings should look like this:
Your WooCommerce reviews now won't show on any of your products.
Reviews Summary Widget:
- After Product Page > Title
- After Category Page > Price
Recent Reviews Widget:
- In tab named "Reviews" - priority 60
- In tab named "Store Feedback" - priority 70
- After product page content - priority 5