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 code snippets?

  • Add the CSS code in Enfold > General Styling > Quick CSS or in your child theme styles. Some CSS code may require you to turn on custom CSS class name support.
  • Add JS, PHP or filters and hooks in functions.php which can be accessed via WP Dashboard > Appearance > Editor > Theme Functions (functions.php) or use a FTP client and locate the functions.php file in wp-content\themes\enfold-child\functions.php
  • Add shortcodes to widget area, text content area or in page editor debug mode.

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: