WooCommerce Tutorials

The tutorials in this archive relate to the modification of WooCommerce via your child theme. Many of the tutorials include code which is tested in specific Genesis child themes including Outfitter Pro which is the latest StudioPress eCommerce child theme for WooCommerce. The code is guaranteed to work as shown in the demo images and videos. Installation of all code as well as support for PHP code is provided for members.

How To Make WooCommerce Shop Page Images Link To Other Websites

Good question asked recently about making the shop page product images link to external sites rather than the single product page. This

Remove Essence Footer CTA From WooCommerce Pages

This code removes the Footer CTA widget from WooCommerce pages in the Essence Pro child theme by StudioPress. Code Installation

Custom WooCommerce Product Image

This solution enables you to modify the main single product image in WooCommerce. This main image is the image added via the Product

Add WooCommerce Product Images Using ACF

This code enables you to add product images using Advanced Custom Fields. You can add a unique product image on any Edit Product screen

Add WooCommerce Product Images Using WP Custom Fields

This code enables you to add your own custom image for each product. If no custom image is added, the placeholder image from Woocommerce is

Custom WooCommerce Single Product Page Template For Genesis

This template enables you to fully customize/modify the default functionality & styling of the WooCommerce single product page. In

Custom WooCommerce Product Page Archive Template For Genesis

This template enables you to fully customize the WooCommerce product/shop page in any Genesis child theme. Customization includes

2 Ways To Show Custom Header Images On Each WooCommerce Product Category Page

These solutions let you add a custom image for your logo to any WooCommerce product category page. If none added, a default named

Add Image After WooCommerce Product Category Page Title In Genesis Child Themes

This code enables you to add a linkable image after the WooCommerce products header on any product category page. There's 2 snippets

Genesis Layout Settings On WooCommerce Pages

There's 3 ways to change the layout settings in Genesis child themes. 1. You can use the Layout Settings on any Edit Page screen to

Change Number of Product Columns On WooCommerce Archive Pages In Genesis

The code snippets in this tutorial enable you to change the number of columns WooCommerce products are displayed in for specific archive

Add Woo Shopping Cart Basket To Nav Menu In Genesis

This tutorial provides a slightly different method to this tutorial which enables you to add a shopping cart icon and item number to your

Outfitter Pro Shop Page Like Front Page 2 Products Widget

The solution in this download enables you to display your shop page ( product archive page ) the same as the front page 2 widget area which

Replace Masonry With CSS Grid In Outfitter Pro

Outfitter Pro is the latest StudioPress child theme for WooCommerce which uses a masonry layout on the front page. This tutorial shows

Remove Sidebar on WooCommerce Pages

This tutorial provides 2 ways to remove the sidebar from any type of WooCommerce page in Genesis child themes. 1. You can change the

WooCommerce Conditional Tag Checks All Pages

The code in this tutorial creates a custom made conditional tag which you can use with any custom function to check for all types of

Add WooCommerce Cart Quantity & Total Price To Nav Menu

This code enables you to add both the cart quantity ( count ) and the cart total ( price ), to any WordPress nav menu. The price is also

Link Site Title On WooCommerce Pages To Shop

This code for HTML 5 Genesis child theme users, links your site title ( in your header ) to your shop page on WooCommerce pages