How to create a custom Woocommerce archive / carousel

If you have struggled with customising your Woocommerce archive page or if you have wanted to created that slick Woocommerce carousel,  you have come to the right place.

You might be wondering right about now, why the heck the 2 ( archive and carousel ) are in the same post? Don’t you need 2 different sets of procedures? Don’t you need 2 plugins?

Here is the good news, you don’t!

Here is how you can create a fully customised Woocommerce archive page and a fully customised carousel slider with Elementary WP.

Custom Woocommerce Archive with Elementary:

  1. Install Elementary plugin: You can see how to install the plugin here, http://pauple.com/documentation/#installing-elementary-plugin.
  2. Find “Elementary” in your WordPress dashboard menu and go to Elements > Add New Element.
  3. Then, enter the name of your element and click Customize this Element button.
  4. From the “Element Bundle” pop, choose a base element to act as the starting point.
    Note: You can customise this element later, but choose an element that is closest to what you want to accomplish.
  5. Customise Element: 

    1.  From version 1.1 ( which is in beta as of  April 26th 2016, to be released in a week , i.e. first week of May 2016), when the element is loaded, you can customise the layout of the element by dragging the individual text / image / other content. You can also add / delete new fields and change their content type.9.1

    2.  You can select any field / content and edit its css via a simple to use atomic css editor.

  6. Content Filtering: Screen Shot 2016-04-26 at 11.21.04 AM
    1. To filter the woocommerce products, choose “products” ( in most common cases woocommerce uses products post_type ) from the post_types filter in the content filter section of the Editor tools. ( found in the right sidebar ).
    2. You can then choose options like fields -> post_id ( or ) taxonomy -> product_category to filter the content further. Other filter options included is date, with which you can filter posts from a date range.
  7. Collection settings: ( archive options )
    Editor Tools -> Collection Settings
    By default, the option chosen is “Archive”. You can customise archive settings like max number of posts, posts per page in here.Custom Woocommerce Carousel Slider with Elementary:
  8. The only difference between creating a Woocommerce archive and Woocommerce carousel slider is to switch step 7 with 8. Follow steps 1 – 6, then jump here:
    1. Go to Editor Tools -> Collection Settings
    2. Choose Carousel from CollectionType dropdown.
    3. Toggle Autoplay on/off as you wish.
    4. Choose the autoplay interval.

And you are done!

With Elementary, you are not limited to just Woocommerce, but you can use almost any custom post type generated from almost any plugin / theme. You can edit css, content filters and drag-n-drop even the layout. In all, Elementary is a complete solution for building archives and carousel sliders and MORE TO COME.

To try a free demo, go to http://pauple.com/elementary/

Leave a Comment

Your email address will not be published.