- Remove or Edit The WooCommerce Menu Icon
- How To Define Your WooCommerce Shop Page
- Add Sidebar To WooCommerce Products
- Change WooCommerce Columns
- How To Add “Hover” Image For WooCommerce Product Shop Entry
- Change WooCommerce Single Product Main Title
- Change Products Per Page on WooCommerce Shop
- Disable WooCommerce Product Zoom
- Adding Equal Height to WooCommerce Products
By default if you have the WooCommerce plugin active on the Diamond them then a little shopping cart will display in the main navigation menu. This icon can be remove and also tweaked via the WordPress customizer.
Browse to: Appearance -> Customize -> WooCommerce -> General -> Menu Cart
In WooCommerce you must declare your “shop” page which will be used to display your recent products but also used in the theme’s breadcrumbs trail. To define your page you first need to create a standard page (if you haven’t done so yet) then go to WooCommerce > Settings then click on the “Products” tab then on the “Display” sub-tab where you will find the dropdown option.
The product pages for WooCommerce already has support for a sidebar you simply need to go to Appearance > Customize > WooCommerce > Single and change the “Layout” option to either “Left Sidebar” or “Right Sidebar”.
The Diamond WordPress theme includes built-in support for the WooCommerce plugin and hence it also includes options to easily change the number of columns displayed for your products on the shop, related, cross-sells and up-sells. Simply log into WordPress and go to Appearance > Customize > WooCommerceto make your edits.
Shop & Category Columns
To change columns on the main shop page and on the product categories/tags click on the “Archives” tab in the WooCommerce customizer section and alter the “Shop Columns” setting.
Up-Sells & Related Item Columns
To change the number of columns and items displayed for the WooCommerce Up-Sells and Related Items click on the “Single” tab in the Customizer WooCommerce settings and here you will be able to make your modifications.
The default WooCommerce shop displays your products with a featured image, title, price and purchase button. You can also add a secondary image so when you hover on the main product picture it displays a second one. The way it works is by checking your product “gallery” and displaying the second image from the gallery:
WooCommerce Entry Style
In order for the hover affect to work you need to make sure you have selected the correct style (Image Swap) at Appearance > Customize > WooCommerce > Archives.
By default in the Diamond theme the main shop takes on the name of the shop page so you can alter the main shop by simply editing the page title for the page defined for your shop. However, single products by default display the text “Products”. This can be altered at Appearance > Customize > WooCommerce > Single, see the image below:
By default in WooCommerce you would need to use advanced functions to alter the number of products displayed per page. However, in the Diamond WordPress theme there is a built-in setting to change that. Simply go to Appearance > Customize > WooCommerce > Archive and change the Posts Per Page field. This will change how many products display on the main shop and categories before the pagination is shown.
In the Diamond theme you can easily disable the product zoom which is native to WooCommerce by logging into your WordPress dashboard and going to Appearance > Customize > WooCommerce > Single and unchecking the box next to the “Product Gallery Zoom” setting.
Because of how WooCommerce is designed by default if your titles, descriptions, prices, images don’t match in size across all products the buttons will be positioned at different levels for each product. Luckily in your Diamond theme there is a way to fix that!
Step 1: Make Sure Images are Cropped to the same Dimensions
Of course if your images are different sizes for each product then your entries won’t all be the same height. So first log into WordPress and browse to Theme Panel > Image Sizes > WooCommerce and make sure to enter a custom cropping height and width for your Product Entry setting.
Step 2: Enable Equal Heights in the Customizer
Now go to Appearance > Customize > WooCommerce > Shop & Archives and enable the Equal Height setting. What this will do is give the main content across all entries the same height – so the title & price will be set to the same height for all items and thus making the button (which is displayed after the title and content) align itself with the buttons for all other entries.