{"id":1677559,"date":"2020-07-10T12:26:21","date_gmt":"2020-07-10T12:26:21","guid":{"rendered":"https:\/\/toolset.com\/?post_type=course-lesson&p=1677559"},"modified":"2020-11-23T06:15:43","modified_gmt":"2020-11-23T06:15:43","slug":"creating-a-custom-woocommerce-product-slider","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/fr\/course-lesson\/creating-a-custom-woocommerce-product-slider\/","title":{"rendered":"Creating a Custom WooCommerce Product Slider"},"content":{"rendered":"
\n
\"Example<\/a>
Example of a slider with featured products<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n

In this lesson, you will learn how to create a slider with featured<\/strong> products. Each of your slides will include some of your standard WooCommerce fields and also your custom taxonomy.<\/p>\n\n\n\n

Steps for creating product sliders<\/h2>\n\n\n\n

Create a View for <\/strong>displaying products<\/h3>\n\n\n\n
  1. Edit or create a page and insert the View <\/strong>block.<\/li>
  2. In the View-creation wizard, enable Pagination<\/strong> and in the Select View Loop Style<\/strong> section, choose the Unformatted <\/strong>(last) option.<\/li>
  3. In the last step of the wizard, select Products<\/strong> as your post type.<\/li><\/ol>\n\n\n\n

    Display product fields and apply custom styling<\/strong><\/h3>\n\n\n\n
    1. Insert a Container <\/strong>block and set its background to Image<\/strong>. <\/li>
    2. Make the image dynamic and link to the post’s featured image.<\/li>
    3. Use Toolset Heading<\/strong>, Single Field<\/strong>, and WooCommerce<\/strong> blocks to add other dynamic fields<\/a> to your slider, such as the post title, product categories or your custom taxonomy.<\/li><\/ol>\n\n\n\n

      Make your View slide automatically<\/strong><\/h3>\n\n\n\n
      1. Use the Block Navigation<\/strong> button to select the main View <\/strong>block.<\/li>
      2. In the right sidebar, expand the Pagination <\/strong>section.<\/li>
      3. Select the Pagination enabled with automatic AJAX transition <\/strong>option.<\/li>
      4. In the Items Per Page <\/strong>dropdown, select 1<\/strong>. You can also tweak other options like the transition effect and duration.<\/li><\/ol>\n\n\n\n

        Add filters to your slider<\/strong><\/h3>\n\n\n\n

        By deafult, your slider will display all products from your site. You can limit the products by setting up filters.<\/p>\n\n\n\n

        1. Use the Block Navigation<\/strong> button to select the main View <\/strong>block.<\/li>
        2. In the right-hand sidebar, expand the Content Selection<\/strong> section.<\/li>
        3. Add one or more filters of your choice. <\/li><\/ol>\n\n\n\n

          Hint: If you want to select only featured products (the ones you mark using stars in your WooCommerce backend list), you would need to use the Product Visibility<\/strong> filter set to featured<\/strong>. Please note that “Visibility” is a hidden taxonomy and you would need to enable. To do this, go to the Toolset<\/strong> \u2192 Settings <\/strong>page, click the Front-end<\/strong> Content <\/strong>tab and under the Hidden custom fields<\/strong> section click the Select custom fields<\/strong> button.<\/p>\n\n\n

          \n
          \"Setting<\/a>
          Setting the filter options for Product Visibility<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n
          <\/div>\n\n\n\n

          Change the pagination to dots<\/strong><\/h3>\n\n\n\n
          1. Click to select the View’s Pagination<\/strong> block.<\/li>
          2. In the right sidebar, change pagination controls from numbers to dots.<\/li>
          3. Additionally, you can expand the Advanced <\/strong>section and center align the pagination controls.<\/li><\/ol>\n","protected":false},"author":4341,"featured_media":1712673,"template":"","related-lesson":[8445],"class_list":["post-1677559","course-lesson","type-course-lesson","status-publish","has-post-thumbnail","hentry","related-lesson-e-commerce"],"_links":{"self":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/1677559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson"}],"about":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/types\/course-lesson"}],"author":[{"embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/users\/4341"}],"version-history":[{"count":8,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/1677559\/revisions"}],"predecessor-version":[{"id":1853143,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/1677559\/revisions\/1853143"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/media\/1712673"}],"wp:attachment":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/media?parent=1677559"}],"wp:term":[{"taxonomy":"related-lesson","embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/related-lesson?post=1677559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}