Categories: blog

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.

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

  6. Content Filtering: 
    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/

essekia

Share
Published by
essekia

Recent Posts

Digital Detox With Digital Minimalism – A Proven Way To Declutter Your Life

Digital detox is a process in which a person stops using tech products such as…

4 years ago

How to make your own webcomic website with WordPress – Beginners’ Guide

How to make a webcomic website? Don't know the first thing about it? Here's how…

8 years ago

WordPress 4.9.1 – another step towards hardening security

The recent WordPress including the WordPress 4.9.1 updates have seen more emphasis given to security…

8 years ago

6 Powerful Ideas that define Online Brand Building

Over 600 websites are created every minute, that’s over 200,000 every day and 73 million…

8 years ago

WordPress 4.8.3 | urgent security fix | UPDATE NOW

WordPress recently announced the release of WordPress 4.8.3 with an important security fix. It is…

8 years ago

Helpie Update : Version 1.2.3

Glad to announce that we have released Helpie 1.2.3 with some amazing new features. Take…

8 years ago