Shop

Overview

There are many e-commerce plugins which seamlessly integrate with WordPress but we are going to mostly discuss WooCommerce which is one of the best free plugins out there. As you might already know WooCommerce adds extra features to your existing site to help the site owners to independently sell online one or more digital or physical products and services.

The most common type of shops setup using WooCommerce are:

  • Physical product – For example, a book, toys, clothing etc which can be shipped.
  • Downloadable Digital products – For example, software, digital photos or PDF magazine one that doesn’t require shipping.
  • Subscriptions and memberships sites.
  • Service-oriented business – For example web design.
  • Non-profit sites which can accept donations.
  • Affiliate store – External links to the products are listed on your website to earn a commission when the listed.
  • Online Booking system – For example Travel package or movie ticket booking.

Code Snippet

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

[av_productgrid columns='3' items='9' wc_prod_visible='' wc_prod_hidden='' wc_prod_featured='' offset='0' sort='dropdown' paginate='yes' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='av-2zf7dw']

Customization

Quick-Start with WooCommerce

Enfold has built in support for the ecommerce plugin WooCommerce. This means that when you install and use  the plugin’s output will have an integrated look and feel as well as some custom elements made just for the plugin.

You can see the full documentation for WooCommerce here: docs.woothemes.com/documentation/plugins/woocommerce/

Custom WooCommerce Shop Overview with Advanced Layout Editor

Once you open the WooCommerce default Page, the “Home Page of your shop” so to speak you will notice that the advanced layout editor is disabled by default (See image). This is because Woocommerce overwrites the contents of this pages and executes a custom query for your products. This does not play well with the way the Advanced Layout editor works.

So if you want to build a fancy shop overview with the advanced layout editor you got 2 options:

  1. The easier option is to simply create a new Page and add a “Product Grid” template builder element, along with all the other stuff you want to show and simply don’t use the default shop page at all. This should be sufficient in most cases.
  2. The more “complicated” option is to activate a beta feature of ours, that disables the WooCommerce Custom Query.
    If thats the way you want to go, you will need to add the following snippet to either your themes or child themes function.php file:

    add_theme_support( 'avia_custom_shop_page' );

    This will enable the Layout Builder for the default Shop page but also remove the default WooCommerce Products that would usually be displayed on that page. You then have to add them with a template builder element, just as in solution #1

    Please keep in mind that solution #2 is a Beta feature and is still tested.

Remove Border Radius from Product List Images

The new Product List element added with Enfold version 3.0 will default to showing the images as circles by adding a large border radius to them. You can remove it to with this css snippet:

.av-catalogue-image {
border-radius: 0;
}

Change WooCommerce single product page layout

In Enfold version 2.6 the WooCommerce configuration file was changed so that you can modify the single product layout through your child themes functions.php using the built css grid.

For example, the following would give you a right sidebar:

#
# wrap single product image in an extra div
#
add_action( 'woocommerce_before_single_product_summary', 'avia_add_image_div', 2);
add_action( 'woocommerce_before_single_product_summary',  'avia_close_image_div', 20);
function avia_add_image_div()
{
	echo "<div class='four units single-product-main-image alpha'>";
}
 
function avia_close_image_div()
{
	global $avia_config;
	$avia_config['currently_viewing'] = "shop_single";
 
	echo "</div>";
}
 
 
#
# wrap single product summary in an extra div
#
add_action( 'woocommerce_before_single_product_summary', 'avia_add_summary_div', 25);
add_action( 'woocommerce_after_single_product_summary',  'avia_close_summary_div', 3);
function avia_add_summary_div()
{
	echo "<div class='five units single-product-summary'>";
}
 
 
 
function avia_close_summary_div()
{
	echo "</div>"; //close out the summary
	echo "<div class='three units single-product-sidebar'>";
	get_sidebar();
	echo "</div>";
}

Make WooCommerce images in the shop the same aspect ratio

Please add following code to Enfold theme options > General Styling > Quick CSS field:

/* Shop / Categories - Sets the aspect ratio of the image to square and contains the image within it */
#top .thumbnail_container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#top .thumbnail_container {
aspect-ratio:1/1;
}

/* Product Page - Sets the aspect ratio of the main product image to square and contains the image within it */
#top .product div.images img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.template-shop .single-product-main-image .images a {
    aspect-ratio: 1/1;
    overflow: hidden;
}

STOP ENFOLD CROPPING IMAGES IN THE SHOP

Please add following code to Functions.php in your child theme in Appearance > Editor.

add_action('after_setup_theme', 'update_enfold_image_sizes');
	function update_enfold_image_sizes() {
add_image_size ('shop_thumbnail', 200, 0, false );
add_image_size ('shop_catalog', 450, 0, false);
add_image_size ('shop_gallery_thumbnail', 300, 0, false);
}

NOTES:  Please adjust the aspect ratio to suit your WooCommerce Settings.
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio