{"id":12083,"date":"2017-01-06T13:54:53","date_gmt":"2017-01-06T13:54:53","guid":{"rendered":"http:\/\/nativewptheme.net\/support\/?p=12083"},"modified":"2017-04-28T14:37:59","modified_gmt":"2017-04-28T14:37:59","slug":"woocommerce-products-list","status":"publish","type":"post","link":"https:\/\/nativewptheme.net\/support\/wpbakery\/woocommerce-products-list","title":{"rendered":"WooCommerce Products List"},"content":{"rendered":"<section class=\"wpb-content-wrapper\"><p>[vc_row][vc_column css=&#8221;.vc_custom_1485963458300{padding-right: 35px !important;padding-left: 35px !important;}&#8221; col_shadow=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221; col_shadow_hover=&#8221;box_shadow_enable:disable|shadow_horizontal:0|shadow_vertical:15|shadow_blur:50|shadow_spread:0|box_shadow_color:rgba(0%2C0%2C0%2C0.35)&#8221;][dfd_spacer screen_wide_spacer_size=&#8221;30&#8243; screen_normal_resolution=&#8221;1024&#8243; screen_tablet_resolution=&#8221;800&#8243; screen_mobile_resolution=&#8221;480&#8243;][vc_column_text]Product List module is the excellent solution for displaying the list of the single products on the page. The module variations may be found on <a href=\"http:\/\/nativewptheme.net\/shop\/product-list\/\" target=\"_blank\" rel=\"noopener noreferrer\">Product List<\/a> page.<\/p>\n<p>Before\u00a0displaying the products in WooCommerce Product List module, you need to create products in the corresponding section of the admin panel. Check the <a href=\"http:\/\/nativewptheme.net\/support\/post-types\/product-creation\">Product creation<\/a> section of the theme documentation for more information.<\/p>\n<p>Make sure\u00a0that the WooCommerce plugin is installed and activated on your site.<\/p>\n<h5>Watch the video tutorial on <a href=\"https:\/\/youtu.be\/1W9TPKSzAck\" target=\"_blank\" rel=\"noopener noreferrer\">WooCommerce Product List module creation<\/a> for more details.<\/h5>\n<p>[\/vc_column_text][dfd_spacer screen_wide_spacer_size=&#8221;30&#8243; screen_normal_resolution=&#8221;1024&#8243; screen_tablet_resolution=&#8221;800&#8243; screen_mobile_resolution=&#8221;480&#8243;][dfd_tta_tabs border_radius=&#8221;4&#8243; alignment=&#8221;left&#8221; active_section=&#8221;1&#8243; active_tab_background=&#8221;#3b55e6&#8243; tab_hover_text_color=&#8221;#3b55e6&#8243; tab_active_color_text=&#8221;#ffffff&#8221; border_color_active=&#8221;#3b55e6&#8243;][vc_tta_section title=&#8221;General settings&#8221; tab_id=&#8221;1486545572585-2437c7e1-5371&#8243;][vc_column_text]<\/p>\n<h3>General settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-12193\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/wc-products-list.jpg\" alt=\"\" width=\"978\" height=\"512\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/wc-products-list.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/wc-products-list-300x157.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/wc-products-list-768x402.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Style &#8211; select the best suitable style of the module.<\/strong>\n<ul>\n<li><strong>Button over image<\/strong> &#8211; the Add to Cart button is displayed\u00a0on the featured image of the single product on hover with title and subtitle below it.<\/li>\n<li><strong>Button under image<\/strong> &#8211;\u00a0the Add to Cart button is displayed below the featured image of the single product on hover.<\/li>\n<li><strong>With overlay<\/strong> &#8211;\u00a0the Add to Cart button, title, and subtitle of the product are displayed on the featured image of the single product on hover.<\/li>\n<li><strong>Button over image<\/strong> &#8211;\u00a0the Add to Cart button is displayed in the center of the featured image of the single product on hover, while the title, and subtitle of the product are displayed below the image.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5>Extra features<\/h5>\n<ul>\n<li><strong>Animation<\/strong> \u2013 choose between 14 preset animation effects.<\/li>\n<li><strong>Custom CSS class<\/strong> \u2013\u00a0enter our\u00a0own unique class name for the item \u2013 this is a useful option for those who want to create a specific style. E.g.: you can type <strong>custom-style<\/strong> class and then go to <del class=\"support-arrow-right\">Theme options<\/del>\u00a0<del class=\"support-arrow-right\">General options<\/del>\u00a0<del class=\"support-arrow-right\">Custom CSS\/JS<\/del> <del>Custom CSS<\/del> field and write your own CSS code with this class to get your own style.<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Content settings&#8221; tab_id=&#8221;1486545572829-e1c1304c-ee12&#8243;][vc_column_text]<\/p>\n<h3>Content settings<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2427 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/content-1-2.jpg\" width=\"978\" height=\"640\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/content-1-2.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/content-1-2-300x196.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/content-1-2-768x503.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<h5>Products settings<\/h5>\n<ul>\n<li><strong>Display<\/strong> &#8211; select what products should be displayed. You may select <strong>Recent<\/strong>, <strong>Featured<\/strong>, <strong>On sale<\/strong>, <strong>Top Rated<\/strong>, <strong>Top Sales<\/strong> and <strong>Categories<\/strong> to be displayed.\n<ul>\n<li><strong>Categories<\/strong> &#8211; select the categories of single products to be displayed in the module (available if the &#8216;<strong>Categories<\/strong>&#8216; is selected).<\/li>\n<\/ul>\n<\/li>\n<li><strong>Products to display<\/strong> &#8211; set the number of the single products which will be displayed in the module.<\/li>\n<li><strong>Items offset<\/strong> &#8211; set the spaces between the single products inside the module.<\/li>\n<li><strong>Number of columns<\/strong> &#8211; specify the number of columns for the module.<\/li>\n<\/ul>\n<h5>Content elements<\/h5>\n<ul>\n<li><strong>Title<\/strong> \u2013 set it to <strong>Enable<\/strong> to display the title of the single product.<\/li>\n<li><strong>Subtitle<\/strong> \u2013 set it to <strong>Enable<\/strong> to display the subtitle of the single product.<\/li>\n<li><strong>Price\u00a0<\/strong>\u2013 set it to <strong>Enable<\/strong> to display the price of the single product.<\/li>\n<li><strong>Rating\u00a0<\/strong>\u2013 set it to <strong>Enable<\/strong> to display the rating of the single product.<\/li>\n<li><strong>Enable cart button<\/strong>\u2013 set it to <strong>Enable<\/strong> to display the Add to cart button\u00a0of the single product.<\/li>\n<li><strong>Wishlist<\/strong>\u2013\u00a0set it to <strong>Enable<\/strong> to display the wishlist button\u00a0of the single product. Note, the YITH Wishlist plugin.<\/li>\n<li><strong>Content alignment<\/strong> \u2013\u00a0select the horizontal alignment of the single product content. <strong>Left<\/strong>, <strong>right<\/strong> and <strong>center<\/strong> positions are available.<\/li>\n<\/ul>\n<h5>Box shadow settings<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2430 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/box-shadow-settings-1.jpg\" width=\"978\" height=\"483\" srcset=\"https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/box-shadow-settings-1.jpg 978w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/box-shadow-settings-1-300x148.jpg 300w, https:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2017\/01\/box-shadow-settings-1-768x379.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/p>\n<ul>\n<li><strong>Box shadow<\/strong> \u2013 set it to <strong>Enable<\/strong> to activate the shadow for the\u00a0product featured image.\n<ul>\n<li><strong>Shadow parameters<\/strong> \u2013\u00a0choose shadow parameter and set the color, in accordance with the following structure: <strong>horizontal shadow<\/strong>, <strong>vertical shadow<\/strong>, <strong>blur<\/strong>, and <strong>spread<\/strong>. More details can be found following <a href=\"http:\/\/www.w3schools.com\/cssref\/css3_pr_box-shadow.asp\">this link<\/a>.<\/li>\n<li><strong>Color<\/strong> \u2013 set the color for the product category shadow.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Box shadow on hover<\/strong> \u2013\u00a0set it to <strong>Enable<\/strong> to activate the shadow for the\u00a0product featured image on hover.\n<ul>\n<li><strong>Shadow parameters<\/strong> \u2013\u00a0choose shadow parameter and set the color, in accordance with the following structure: <strong>horizontal shadow<\/strong>, <strong>vertical shadow<\/strong>, <strong>blur<\/strong>, and <strong>spread<\/strong>. More details can be found following <a href=\"http:\/\/www.w3schools.com\/cssref\/css3_pr_box-shadow.asp\">this link<\/a>.<\/li>\n<li><strong>Color<\/strong> \u2013 set the color for the product category shadow.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][vc_tta_section title=&#8221;Typography settings&#8221; tab_id=&#8221;1486545573311-423c930f-c6e7&#8243;][vc_column_text]<\/p>\n<h3>Typography settings<\/h3>\n<h5>Title typography<\/h5>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-1322 size-full\" src=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/typography.jpg\" sizes=\"(max-width: 978px) 100vw, 978px\" srcset=\"http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/typography.jpg 978w, http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/typography-300x237.jpg 300w, http:\/\/nativewptheme.net\/support\/wp-content\/uploads\/2016\/12\/typography-768x606.jpg 768w\" alt=\"typography\" width=\"978\" height=\"772\" \/><\/p>\n<p>These settings are inherited from <del class=\"support-arrow-right\">Theme options<\/del><del class=\"support-arrow-right\">Typography\/Fonts<\/del><del class=\"support-arrow-right\">Woocommerce typography\u00a0<\/del><del>Single product title Typography.<\/del> For <strong>Overlay<\/strong> style the default text color is set to #fff.<\/p>\n<ul>\n<li><strong>Element tag<\/strong> \u2013 select the tag for the title.<\/li>\n<li><strong>Font size<\/strong> \u2013 set the font size you need to use in the title.<\/li>\n<li><strong>Letter spacing<\/strong> \u2013 set the needed distance between letters.<\/li>\n<li><strong>Line-height<\/strong> \u2013\u00a0set the needed distance between lines in the title text.<\/li>\n<li><strong>Text color<\/strong> \u2013 set the color of the font.<\/li>\n<li><strong>Font style<\/strong> \u2013 select the font weight and style (bold, italic) for the title.<\/li>\n<li><strong>Custom font family<\/strong> \u2013 set it to <strong>Enable<\/strong> to use custom Google font.\n<ul>\n<li><strong>Font Family<\/strong> \u2013 select the font family from the drop-down list.<\/li>\n<li><strong>Font style<\/strong> \u2013 select the font weight and style (bold, italic) for the title.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5>Subtitle typography<\/h5>\n<p>These settings are inherited from <del class=\"support-arrow-right\">Theme options<\/del><del class=\"support-arrow-right\">Typography\/Fonts<\/del><del class=\"support-arrow-right\">Woocommerce typography\u00a0<\/del><del>Single product subtitle Typography.<\/del><\/p>\n<ul>\n<li><strong>Element tag<\/strong> \u2013 select the tag for the subtitle.<\/li>\n<li><strong>Font size<\/strong> \u2013 set the font size you need to use in the subtitle.<\/li>\n<li><strong>Letter spacing<\/strong> \u2013 set the needed distance between letters.<\/li>\n<li><strong>Line-height<\/strong> \u2013\u00a0set the needed distance between lines in the subtitle text.<\/li>\n<li><strong>Text color<\/strong> \u2013 set the color of the font.<\/li>\n<li><strong>Font style<\/strong> \u2013 select the font weight and style (bold, italic) for the subtitle.<\/li>\n<li><strong>Custom font family<\/strong> \u2013 set it to <strong>Enable<\/strong> to use custom Google font.\n<ul>\n<li><strong>Font Family<\/strong> \u2013 select the font family from the drop-down list.<\/li>\n<li><strong>Font style<\/strong> \u2013 select the font weight and style (bold, italic) for the subtitle.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>[\/vc_column_text][\/vc_tta_section][\/dfd_tta_tabs][\/vc_column][\/vc_row]<\/p>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Product List module is the excellent solution for displaying the list of the single products on the page. <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[22,13,33],"_links":{"self":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/12083"}],"collection":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/comments?post=12083"}],"version-history":[{"count":9,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/12083\/revisions"}],"predecessor-version":[{"id":12719,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/posts\/12083\/revisions\/12719"}],"wp:attachment":[{"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/media?parent=12083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/categories?post=12083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nativewptheme.net\/support\/wp-json\/wp\/v2\/tags?post=12083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}