{"id":3114,"date":"2017-09-15T08:02:05","date_gmt":"2017-09-15T08:02:05","guid":{"rendered":"https:\/\/ombra.pikarthouse.com\/documentation\/?page_id=3114"},"modified":"2018-05-28T08:50:35","modified_gmt":"2018-05-28T08:50:35","slug":"woocommerce","status":"publish","type":"page","link":"https:\/\/nels.pikarthouse.com\/documentation\/miscellaneous\/woocommerce\/","title":{"rendered":"WooCommerce"},"content":{"rendered":"<p>Your shopping experience should be fun and your theme&#8217;s totally agrees with you. This is why, the theme is compatible with the most well-known ecommerce plugin in WordPress market\u00a0\u2014 <strong><a href=\"https:\/\/woocommerce.com\/\" target=\"_blank\" rel=\"noopener\"><em>WooCommerce<\/em><\/a><\/strong>.<\/p>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -36px;\" ><div class=\"pikode--column pikode--column--8\" style=\"border-left-width: 36px;\"><p>WooCommerce comes with plethora of sophisticated options that you could explore by using the <em><a href=\"https:\/\/docs.woocommerce.com\/\" target=\"_blank\" rel=\"noopener\">plugin documentation<\/a>\u00a0<\/em>or by experimenting them directly in <em>WordPress Dashboard\u00a0\u2192 WooCommerce<\/em>.<\/p>\n<p>In this chapter, we will focus your attention just on elements that your theme brings up to enhance your shopping experience beyond what WooCommerce could offer by default. In order to do so, go to <em>Appearance \u2192 Customize\u00a0\u2192 WooCommerce<\/em>.<\/p><\/div><div class=\"pikode--column pikode--column--4\" style=\"border-left-width: 36px;\">\n<div \t\tclass=\"pikode pikode--row  summary-box\"  style=\"padding: 0px 0px 36px 0px; margin: 0px -36px 0px 0px;\" >\n\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t\t<div class=\"pikode--row__background\">\n\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"color-overlay\"  style=\"opacity: 1; background-color: #4b917d;\" ><\/div>\n\t\t\t\t\t\n\t\t\t\t<\/div>\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-light\"\n\t\t\t\t style=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  style=\"padding: 0px 30px 0px 30px;\" >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--24\" style=\"font-weight: 700; line-height: 1.0; text-decoration: none; color: #ffffff; padding: 36px 0px 0px 0px;\"><p>Summary<\/p><\/div>\n<p><a href=\"#theme-options\">Theme Options<\/a><br \/>\n<a href=\"#single-product\">Single Product<\/a><br \/>\n<a href=\"#products-shortcode\">Products Shortcode<\/a><\/p>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<\/div><\/div>\n\n<div id=\"theme-options\"\t\tclass=\"pikode pikode--row \"  >\n\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\t style=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--24\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p>Theme Options<\/p><\/div>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<p>The features from Theme Options affect globally the Shop overall experience. Let&#8217;s explore them:<\/p>\n<div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Product Catalog<\/p><\/div>\n<ul>\n<li><strong>Shop Page Display\u00a0<\/strong>\u2014\u00a0choose what to display on the main shop page.<\/li>\n<li><strong>Category Display<\/strong>\u00a0\u2014\u00a0 choose what to display on product category pages.<\/li>\n<li><strong>Default Product Sorting<\/strong>\u00a0\u2014 choose how should products be sorted in the catalog by default.<\/li>\n<li><strong>Products per Row<\/strong> \u2014\u00a0choose how many products should be shown per row.<\/li>\n<li><strong>Rows per Page\u00a0\u2014 <\/strong>choose how many rows of products should be shown per page.<\/li>\n<li><strong>Display options<\/strong>\n<ul>\n<li><strong>Display type<\/strong>\u00a0\u2014 choose between 4 types of cards: <i>Default<\/i>, <em>Fade<\/em>,\u00a0<em>Pinned or Plain<\/em>. Read more about <a href=\"https:\/\/nels.pikarthouse.com\/documentation\/portfolio\/create-exquisite-items\/#cards\" target=\"_blank\" rel=\"noopener\"><em>cards<\/em><\/a>.<\/li>\n<li><strong>Hover color transparency<\/strong> \u2014 overlay color transparency while hovering by mouse. The overlay color is set up in Theme Options when choosing General \u2192\u00a0Colors \u2192\u00a0Feature color.\u00a0It affects\u00a0just\u00a0Fade\u00a0and Pinned Types<\/li>\n<li><strong>Columns Spacing\u00a0\u2014 <\/strong>choose spacing between columns<\/li>\n<\/ul>\n<\/li>\n<li><strong>Filter\u00a0<\/strong>\u2014 it refers to products categories filter on shop page\n<ul>\n<li><strong>Columns\u00a0<\/strong>\u2014 pick number of columns from 1 to 6<\/li>\n<\/ul>\n<\/li>\n<li><strong>Cross-sells Products Autoplay \u2014<\/strong>\u00a0if enabled, slider plays automatically<\/li>\n<li><strong>Upsells Products Autoplay \u2014<\/strong>\u00a0if enabled, slider plays automatically<\/li>\n<li><strong>Related Products Autoplay \u2014\u00a0<\/strong>if enabled, slider plays automatically<\/li>\n<li><strong>Catalog Mode \u2014\u00a0<\/strong>if enabled, it globally hides the price and Add to Cart button on Product Cards and Pages<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3991 size-full\" src=\"https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2018\/05\/ShopPage.jpg\" alt=\"\" width=\"800\" height=\"600\" srcset=\"https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2018\/05\/ShopPage.jpg 800w, https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2018\/05\/ShopPage-300x225.jpg 300w, https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2018\/05\/ShopPage-768x576.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Product<\/p><\/div>\n<p>The options below are available for Single Product pages.<\/p>\n<ul>\n<li><b>Spacing\u00a0<\/b>represents\u00a0the amount of space <em>Product elements<\/em>\u00a0fills up from the total width\u00a0of browser window. When\u00a0adding\u00a0spacing, the width of content is reduced\u00a0with a certain amount of pixels, either by left or by right side.\n<ul>\n<li><strong>left <\/strong>\u2014\u00a0add spacing to the left side of Product Content<\/li>\n<li><strong>right <\/strong>\u2014 add spacing to the right side of Product Content<\/li>\n<\/ul>\n<\/li>\n<li><strong>V<\/strong><strong>isibility<\/strong> section helps you to\u00a0decide which elements of Single Product will be visible to visitors. See more about\u00a0<a href=\"https:\/\/nels.pikarthouse.com\/documentation\/theme-options\/content\/#visibility-items\" target=\"_blank\" rel=\"noopener\"><em>visibility items.<\/em><\/a> It has the following options:\n<ul>\n<li><strong>Related Products\u00a0<\/strong>\u2014 located almost at the bottom of\u00a0Product, there are showcased products that has the same categories as the actual\u00a0one. Find out more about <a href=\"https:\/\/nels.pikarthouse.com\/documentation\/managing-content\/layout-structure\/#related-items\" target=\"_blank\" rel=\"noopener\"><em>Related Items<\/em><\/a>.<\/li>\n<li><strong>Navigation\u00a0<\/strong>\u2014 located at the bottom of Product page,\u00a0the link is conceived to redirect the visitor to Shop page. It includes the <strong><em>Previous Product\u00a0<\/em><\/strong>link, the <strong><em>Next Product\u00a0<\/em><\/strong>link and <em><strong>All Products\u00a0<\/strong><\/em>link<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Header<\/p><\/div>\n<p>The options below take effect just in the header of your site.<\/p>\n<ul>\n<li><strong>Shop Icons Visibility\u00a0\u2014\u00a0<\/strong>you can show\/hide the following icons: Wishlist, My Account, Shop Cart<\/li>\n<li><strong>Wishlist icon<\/strong>\n<ul>\n<li><strong>Items Background<\/strong>\u00a0\u2014 pick any color for the item background color<\/li>\n<li><strong>Items Text<\/strong>\u00a0\u2014 pick any color for the item color<\/li>\n<\/ul>\n<\/li>\n<li><strong>My Account Icon\u00a0<\/strong><strong>\u2014\u00a0<\/strong>you can decide the behaviour of My Account icon while clicking\/hovering on the icon\n<ul>\n<li><strong>Enable My Account Popup<\/strong><\/li>\n<\/ul>\n<\/li>\n<li><strong>Cart Icon<\/strong>\n<ul>\n<li><strong>Items Background<\/strong>\u00a0\u2014 pick any color for the item background color<\/li>\n<li><strong>Items Text<\/strong>\u00a0\u2014 pick any color for the item color<\/li>\n<\/ul>\n<\/li>\n<li><strong>Cart Popup\u00a0\u2014\u00a0<\/strong>you can decide the behaviour of your cart while clicking on cart icon\n<ul>\n<li><strong>Cart icon link\u00a0\u2014 <\/strong>choose between Cart popup or Cart page<\/li>\n<\/ul>\n<\/li>\n<li><strong>Add to Cart Popup<\/strong>\u00a0<strong>\u2014<\/strong> if enabled, Cart Popup appears when Add to Cart is triggered on archives pages. This is effective just when Add to Cart does not redirect to the Cart Page<\/li>\n<\/ul>\n<div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Ribbons<\/p><\/div>\n<ul>\n<li><strong>Hot \u2014 <\/strong>it refers at Featured Products\n<ul>\n<li><strong>Background<\/strong>\u00a0\u2014\u00a0choose the background color for the ribbon<\/li>\n<li><b>Color\u00a0<\/b>\u2014 choose the text color for the ribbon<\/li>\n<\/ul>\n<\/li>\n<li><strong>Sale \u2014\u00a0<\/strong>it refers at products with a new sale price\n<ul>\n<li><strong>Background<\/strong>\u00a0\u2014\u00a0choose the background color for the ribbon<\/li>\n<li><b>Color<\/b>\u2014 choose the text color for the ribbon<\/li>\n<\/ul>\n<\/li>\n<li><strong>New \u2014\u00a0<\/strong>it refers at products added in the last n days\n<ul>\n<li><strong>days number \u2014\u00a0<\/strong>for products added less then number of days (pick days number)<\/li>\n<li><strong>Background<\/strong>\u00a0\u2014\u00a0choose the background color for the ribbon<\/li>\n<li><b>Color<\/b>\u2014 choose the text color for the ribbon<\/li>\n<\/ul>\n<\/li>\n<li><strong>Out of Stock \u2014\u00a0<\/strong>it refers at Out of Stock Products\n<ul>\n<li><strong>Background<\/strong>\u00a0\u2014\u00a0choose the background color for the ribbon<\/li>\n<li><b>Color<\/b>\u2014 choose the text color for the ribbon<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n<div id=\"single-product\"\t\tclass=\"pikode pikode--row \"  >\n\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\t style=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--24\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p><span style=\"color: #4b917d;\">Single Product<\/span><\/p><\/div>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<p>Beyond General Options and Masonry Archive Options that are well-described and explained in <a href=\"https:\/\/nels.pikarthouse.com\/documentation\/managing-content\/general-options\/\" target=\"_blank\" rel=\"noopener\"><em>General Options chapter<\/em><\/a>, Single Product page features one more panel of options that is called <em><strong>Product Options<\/strong><\/em>:<\/p>\n<ul>\n<li><strong>Product Image &amp; Gallery\u00a0<\/strong>\u2014\u00a0you can enable\/disable the Product Image &amp; Gallery on Single Product Page<\/li>\n<li><strong>Full width\u00a0<\/strong>\u2014 Product Header takes screen full width size<\/li>\n<li><strong>Hero Header\u00a0<\/strong>\u2014 \u00a0it represent the element you could\u00a0<strong><em>emphasize your product\u00a0<\/em><em>with<\/em><\/strong> and\u00a0<strong><em>make it unique<\/em><\/strong>. You can add any type of content here \u2014 from media items to shortcodes\u00a0\u2014 the perfect opportunity to unleash your shop creativity.<\/li>\n<li><strong>Details position\u00a0<\/strong>\u2014\u00a0choose the position for Product Details. It works the same way as <a href=\"https:\/\/nels.pikarthouse.com\/documentation\/portfolio\/managing-projects\/#project-details\" target=\"_blank\" rel=\"noopener\"><strong><em>Project Details<\/em><\/strong><\/a>.<\/li>\n<li><strong>Sticky Details\u00a0\u2014 <\/strong>product details are sticky while scrolling for Right and Left positions<\/li>\n<li><strong>Product Video URL \u2014 <\/strong>enter Youtube or Vimeo video link here. Video shows up while clicking on Gallery Video button<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3249\" src=\"https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2017\/09\/Shop-Single_Product.jpg\" alt=\"\" width=\"1200\" height=\"900\" srcset=\"https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2017\/09\/Shop-Single_Product.jpg 1200w, https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2017\/09\/Shop-Single_Product-300x225.jpg 300w, https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2017\/09\/Shop-Single_Product-768x576.jpg 768w, https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2017\/09\/Shop-Single_Product-1024x768.jpg 1024w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/p>\n\n<div id=\"products-shortcode\"\t\tclass=\"pikode pikode--row \"  >\n\n\t<div class=\"pikode--row__wrapper pikode--row--height-auto\"  >\n\n\t\t<div class=\"pikode--row-inner\">\n\n\t\t\t\n\t\t\t<div class=\"pikode--row__content pikode--row__content--skin-none\"\n\t\t\t\t style=\"vertical-align: middle;\" >\n\n\t\t\t\t<div class=\"pikode--row__content__wrapper pikode--row__content--center\"  >\n\t\t\t\t\t<div class=\"pikode--row__content-inner pikode--row--width-auto\"  >\n\t\t\t\t\t\t<div class=\"pikode pikode--custom-content  custom-content--24\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #4b917d; padding: 24px 0px 0px 0px;\"><p><span style=\"color: #4b917d;\">Products<\/span><\/p><\/div>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<p><strong>Products\u00a0<\/strong>represent\u00a0a powerful and flexible shortcode that allows you to\u00a0showcase creatively the content, initialized before in Products section. It consists of two parts <em>(as general principle, it is quite similar to <a href=\"https:\/\/nels.pikarthouse.com\/documentation\/shortcodes\/media-elements\/#projects\" target=\"_blank\" rel=\"noopener\">Projects Shortcodes<\/a>):<\/em><\/p>\n<ul>\n<li><strong>information data<\/strong> \u2014 it\u00a0is connected with Products Post Type, where Products Shortcode\u00a0takes data from, like\u00a0Title and Subtitle (represented by Reviews and Price)<\/li>\n<li><strong>display data<\/strong> \u2014 it\u00a0is composed of own options that allows to choose what type of content to\u00a0show and how to display it<\/li>\n<\/ul>\n<p>The Products options are classified in two main groups:<\/p>\n<ul>\n<li><strong>General Properties<\/strong><em>\u00a0\u2014 <\/em>common for almost all types of\u00a0Products<\/li>\n<li><strong>Display\u00a0Typologies<\/strong><em> \u2014 <\/em>depending on Products type, these options are different<\/li>\n<\/ul>\n<div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>General Properties<\/p><\/div>\n<ul>\n<li><strong>Products Type<\/strong>\u00a0\u2014\u00a0filter products by Top Rated, Best Selling and Sale Products<\/li>\n<li><strong>Product Visibility\u00a0<\/strong>\u2014\u00a0filter products by Visible, Catalog, Search, Hidden, Featured<\/li>\n<li><strong>Products Categories<\/strong>\u00a0\u2014\u00a0filter products by categories; leave empty to select all products<\/li>\n<li><strong>Categories usage\u00a0\u2014\u00a0<\/strong>filter based by category usage<\/li>\n<li><strong>Product Tags<\/strong>\u00a0\u2014\u00a0filter by product tags<\/li>\n<li><strong>Products\u00a0<\/strong>\u2014\u00a0you can choose specific products to display, by entering their ID&#8217;s, separated by comma. The ID could be taken from Product URL<\/li>\n<\/ul>\n<p style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3788\" src=\"https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2018\/03\/id_product.jpg\" alt=\"\" width=\"700\" height=\"334\" srcset=\"https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2018\/03\/id_product.jpg 768w, https:\/\/nels.pikarthouse.com\/documentation\/wp-content\/uploads\/sites\/6\/2018\/03\/id_product-300x143.jpg 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<ul>\n<li><strong>SKUs<\/strong>\u00a0\u2014 choose product you want to display (comma separated Products SKUs)<\/li>\n<li><strong>Order by<\/strong>\u00a0\u2014 products can be organized by\u00a0<em>Date<\/em>, <em>Title<\/em>, <em>Author<\/em>, <em>ID<\/em>, <em>Last modified date<\/em> and <em>Parent ID<\/em><\/li>\n<li><strong>Order\u00a0<\/strong>\u2014\u00a0choose between <em>Ascending<\/em> and <em>Descending<\/em> order<\/li>\n<li><strong>Number of items<\/strong>\u00a0\u2014\u00a0enter the number if products to display<\/li>\n<li><strong>CSS class<\/strong>\u00a0\u2014 in case there is a need\u00a0to add more style rules<\/li>\n<\/ul>\n<div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: underline; color: #959595; padding: 12px 0px 0px 0px;\"><p>Display Typologies<\/p><\/div>\n<p>There are three\u00a0ways the Products will showcase on a site page, depending on your needs <em>(for more visual details, please <a href=\"#display-typologies\">see<\/a>)<\/em>:<\/p>\n<ul>\n<li><strong>Masonry<\/strong> \u2014\u00a0a grid with multiple columns<\/li>\n<li><strong>Carousel\u00a0<\/strong>\u2014 similar to slider, but carousel is able to showcase more than one items at one time.\u00a0Read more about <a href=\"https:\/\/nels.pikarthouse.com\/documentation\/portfolio\/create-exquisite-items\/#carousels\" target=\"_blank\" rel=\"noopener\"><em>carousels<\/em><\/a>.<\/li>\n<\/ul>\n<div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #ffffff; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #4b917d;\"><p style=\"text-align: center;\">Common Options<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li><strong>Display<\/strong>\u00a0\u2014\u00a0the way products are displayed:\u00a0<em>Shadow, Move, Fade, Rising<\/em><em>, Plain, List<\/em><\/li>\n<li><strong>Columns<\/strong>\u00a0\u2014\u00a0how many products columns are displayed (1, 2, 3, 4 or 6)<\/li>\n<li><strong>Columns spacing<\/strong> \u2014\u00a0spacing between columns (pixels)<\/li>\n<li><strong>Overlay color\u00a0<\/strong>\u2014\u00a0color layer that covers the product when possible (exceptions: Shadow, Rising, Plain and List cards)<\/li>\n<li><strong>Overlay color transparency<\/strong> \u2014\u00a0color layer transparency (100% means the color is transparent)<\/li>\n<li><strong>Color skin<\/strong>\u00a0\u2014 choose between light or dark skin<\/li>\n<li><strong>Animation<\/strong>\u00a0\u2014\u00a0the way items appear on page while scrolling<\/li>\n<li><strong>Animation delay<\/strong> \u2014 set a delay time for animation, in <em>seconds<\/em> \u2014\u00a0<em>Minimum: 0 seconds, Maximum: 3 seconds<\/em><\/li>\n<\/ul><\/div>\n<div class=\"pikode pikode--cols cols \" style=\"margin-left: -3px;\" ><div class=\"pikode--column pikode--column--6\" style=\"border-left-width: 3px;\"><div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #ffffff; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #4b917d;\"><p style=\"text-align: center;\">Masonry<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li><strong>Categories filter<\/strong>\u00a0\u2014\u00a0positioned inside <em>General Properties<\/em> panel because of technical reasons, it helps to sort products based on categories: <em>Main Categories<\/em> shows just the categories without its child-categories, if comparing to <em>All Categories<\/em><\/li>\n<li><strong>Filter Position<\/strong>\u00a0\u2014 choose between Left, Center and Right<\/li>\n<li><strong>Animation Effect<\/strong>\u00a0\u2014 per unit or per whole block<\/li>\n<li><strong>Progress Delay<\/strong>\u00a0\u2014 set animation delay (in seconds)<\/li>\n<\/ul><\/div><\/div><div class=\"pikode--column pikode--column--6\" style=\"border-left-width: 3px;\"><div class=\"pikode pikode--custom-content  custom-content--18\" style=\"font-weight: 700; letter-spacing: -1px; line-height: 1.68; text-decoration: none; color: #ffffff; padding: 12px 12px 1px 12px; margin: 0px 0px -18px 0px; background-color: #4b917d;\"><p style=\"text-align: center;\">Carousel<\/p><\/div>\n<div class=\"pikode pikode--custom-content with-borders custom-content--14\" style=\"font-weight: 400; line-height: 1.68; text-decoration: none; color: #636363; padding: 24px 18px 0px 0px; border-width: 3px 0px 3px 0px; border-color: #ffffff; background-color: #f1f1f1;\"><ul>\n<li><strong>Autoplay<\/strong><\/li>\n<li><b>Autoplay Speed<\/b><\/li>\n<\/ul><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Your shopping experience should be fun and your theme&#8217;s totally agrees with you. This is why, the theme is compatible with the most well-known ecommerce plugin in WordPress market\u00a0\u2014 WooCommerce. The features from Theme Options affect globally the Shop overall experience. Let&#8217;s explore them: Shop Page Display\u00a0\u2014\u00a0choose what to display on the main shop page. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1663,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3114","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/3114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/comments?post=3114"}],"version-history":[{"count":17,"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/3114\/revisions"}],"predecessor-version":[{"id":4196,"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/3114\/revisions\/4196"}],"up":[{"embeddable":true,"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/pages\/1663"}],"wp:attachment":[{"href":"https:\/\/nels.pikarthouse.com\/documentation\/wp-json\/wp\/v2\/media?parent=3114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}