{"id":1677869,"date":"2020-09-15T12:47:47","date_gmt":"2020-09-15T12:47:47","guid":{"rendered":"https:\/\/toolset.com\/?post_type=course-lesson&p=1677869"},"modified":"2021-05-18T14:44:14","modified_gmt":"2021-05-18T14:44:14","slug":"building-a-custom-woocommerce-shop-page","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/fr\/course-lesson\/building-a-custom-woocommerce-shop-page\/","title":{"rendered":"Building a Custom WooCommerce Shop Page"},"content":{"rendered":"\n

The default WooCommerce Shop page is a standard design that doesn\u2019t allow for much customization. If you want to display your products in a unique way or display different product types in relevant ways, you can\u2019t do it with the default layout.<\/p>\n\n\n\n

Toolset allows you to customize the styling and appearance of your Shop pages, create multiple Shop pages to display according to different criteria, or build completely unique Shop pages from scratch.<\/p>\n\n\n\n

Here are some ideas to get you started:<\/p>\n\n\n\n

\n
\n
\n

Display products based on custom criteria with conditional archives<\/strong><\/p>\n\n\n

\n
\"Create<\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n
\n
\n

Add custom search options to filter by custom fields and taxonomy<\/strong><\/p>\n\n\n

\n
\"Add<\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n
\n
\n

Create Shop pages to shop by entire outfits using post relationships<\/strong><\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n
\n
\n

Display your products in a grid, list, collage, masonry, or fully custom layout<\/strong><\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n

How to Design Your Shop Page<\/h2>\n\n\n\n

The WooCommerce “shop” page is your site’s archive for the Product<\/strong> custom type. We’ll need to edit or create this archive.<\/p>\n\n\n\n

Before you get started, make sure you have the Toolset WooCommerce Block<\/strong>s plugin active.<\/p>\n\n\n\n

  1. Go to Toolset <\/strong>\u2192 Dashboard <\/strong>and click the Create Archive<\/strong> button in the Products<\/strong> row.<\/li>
  2. Choose the layout of the archive (shop page).<\/li>
  3. Insert blocks into the WordPress Archive Loop<\/strong> area to design a single item of your archive.<\/li>
  4. Use the Toolset Heading <\/strong>and Single Field<\/strong> blocks with dynamic sources to display your product title, excerpt, custom fields, and taxonomies.<\/li>
  5. Choose blocks from the Toolset WooCommerce<\/strong> section to display WooCommerce elements such as the Add to Cart Button<\/strong>, Product Price<\/strong>, Product Rating<\/strong>, and more. You will notice that all Toolset WooCommerce blocks allow you to select a custom or native output type<\/a>.<\/li><\/ol>\n\n\n\n

    And that’s it! Of course, you can upgrade your custom Shop Page with many other Toolset features. For example, you might add a custom product search, display items using a different layout instead of a grid, or apply the same archive to other product categories and archives.<\/p>\n","protected":false},"author":4341,"featured_media":1713651,"template":"","related-lesson":[8445],"class_list":["post-1677869","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\/1677869","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\/1677869\/revisions"}],"predecessor-version":[{"id":2059991,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/1677869\/revisions\/2059991"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/media\/1713651"}],"wp:attachment":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/media?parent=1677869"}],"wp:term":[{"taxonomy":"related-lesson","embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/related-lesson?post=1677869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}