{"id":8324,"date":"2018-05-13T02:07:08","date_gmt":"2018-05-13T02:07:08","guid":{"rendered":"https:\/\/kriesi.at\/documentation\/enfold\/?p=8324"},"modified":"2023-01-18T10:45:06","modified_gmt":"2023-01-18T10:45:06","slug":"woocommerce-shop","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/woocommerce-shop\/","title":{"rendered":"Shop"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-2wllz8-4c89d7a9134a620f315a63e308630e6f\">\n#top .av-special-heading.av-2wllz8-4c89d7a9134a620f315a63e308630e6f{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-2wllz8-4c89d7a9134a620f315a63e308630e6f .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-2wllz8-4c89d7a9134a620f315a63e308630e6f .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-2wllz8-4c89d7a9134a620f315a63e308630e6f av-special-heading-h2 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h2 class='av-special-heading-tag '  itemprop=\"headline\"  >Shop<\/h2><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-32owhsg-028b23076c07932852002b15b9a8b762 hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-304k5v4-9115c4fd2a121a6c25622edad4157362 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Overview<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2zdz5pc-d18b0cce4c5b835248df97f8aba373a4 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>There are many e-commerce plugins which seamlessly\u00a0integrate with WordPress but we are going to mostly discuss <a href=\"https:\/\/woocommerce.com\/\" target=\"_blank\" rel=\"noopener\">WooCommerce<\/a> which is one of the best free plugins out there.\u00a0As you might already know WooCommerce adds extra features to your existing site to help the site owners to independently sell online one or more digital or physical products and services.<\/p>\n<p>The most common type of shops setup using WooCommerce are:<\/p>\n<ul>\n<li>Physical product \u2013 For example, a book, toys, clothing etc which can be shipped.<\/li>\n<li>Downloadable Digital products \u2013 For example, software, digital photos or PDF magazine one that doesn\u2019t require shipping.<\/li>\n<li>Subscriptions and memberships sites.<\/li>\n<li>Service-oriented business &#8211; For example web design.<\/li>\n<li>Non-profit sites which can accept donations.<\/li>\n<li>Affiliate store \u2013 External links to the products are listed on your website to earn a commission when the listed.<\/li>\n<li>Online Booking system &#8211; For example Travel package or movie ticket booking.<\/li>\n<\/ul>\n<\/div><\/section>\n<div  class='hr av-2rvoks0-2e38f3badc4b5be519c5ebee08b210fb hr-default  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-9x6xg0-f210b7e109d5e83e31dce2d18ba3c164 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Code Snippet<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-6  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.<\/p>\n<\/div>\n\t\t<\/div><\/div>\n<div  class='hr av-2mfmqzk-ef5fbd57ecac4e4eedc4da50f285ed79 hr-default  avia-builder-el-7  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-304k5v4-16-b7774de1ec57a3bba7092a4be64205b5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode<\/h3>\n<\/div><\/section>\n\n<div  class='hr av-2mfmqzk-14-dcd2c71f5822c39838eb487a21f187e8 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-9x6xg0-15-eecf1faf4a052a4ebf1b4aea55bce9c9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<div  class='hr av-2mfmqzk-12-2406ac162a28342fe443390fbd1a7cec hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-304k5v4-13-270c553ec63b2de876096c19bb2acf51 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Quick-Start with WooCommerce<\/h3>\n<\/div><\/section>\n<div  class='avia-video av-jh49do09-697c548d5b22223f9e29dc73468a7a29 avia-video-16-9 av-no-preview-image avia-video-load-always av-lazyload-immediate av-lazyload-video-embed'  itemprop=\"video\" itemtype=\"https:\/\/schema.org\/VideoObject\"  data-original_url='https:\/\/vimeo.com\/77351544'><script type='text\/html' class='av-video-tmpl'><div class='avia-iframe-wrap'><iframe loading=\"lazy\" title=\"Enfold - Quick-Start with WooCommerce\" src=\"https:\/\/player.vimeo.com\/video\/77351544?dnt=1&amp;app_id=122963&autoplay=0&loop=0&controls=1&muted=0\" width=\"1280\" height=\"720\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen><\/iframe><\/div><\/script><div class='av-click-to-play-overlay'><div class=\"avia_playpause_icon\"><\/div><\/div><\/div>\n<section  class='av_textblock_section av-304k5v4-10-c0de326f602ad3f3cc5da686c856fe45 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Enfold has built in support for the ecommerce plugin WooCommerce. This means that when you install and use \u00a0the plugin\u2019s output will have an integrated look and feel as well as some custom elements made just for the plugin.<\/p>\n<p>You can see the full documentation for WooCommerce here:\u00a0<a href=\"http:\/\/docs.woothemes.com\/documentation\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"nofollow noopener\">docs.woothemes.com\/documentation\/plugins\/woocommerce\/<\/a><\/p>\n<\/div><\/section>\n<div  class='hr av-2mfmqzk-11-230e5e21978df2d1d849e1777cdfede6 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-304k5v4-9-0f6e92037721c05a56f51b9c1193910f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Custom WooCommerce Shop Overview with Advanced Layout Editor<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-304k5v4-7-74d53ba677ba50c569152c023f75ce3b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Once you open the WooCommerce default Page, the \u201cHome Page of your shop\u201d so to speak you will notice that the advanced layout editor is\u00a0<a class=\"lightbox-added\" href=\"http:\/\/www.kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/2\/2015\/01\/screenshot-2015-01-16-at-09.32.14.jpg\">disabled by default (See image)<\/a>. This is because Woocommerce overwrites the contents of this\u00a0pages and executes a custom query for your products. This does not play well with the way the Advanced Layout editor works.<\/p>\n<p>So if you want to build a fancy shop overview with the advanced layout editor you got 2 options:<\/p>\n<ol>\n<li>The easier option is to simply create a new Page and add a \u201cProduct Grid\u201d template builder element, along with all the other stuff you want to show and simply don\u2019t use the default shop page at all. This should be sufficient in most cases.<\/li>\n<li>The more \u201ccomplicated\u201d option is to activate a beta feature of ours, that disables the WooCommerce Custom Query.<br \/>\nIf thats the way you want to go, you will need to add the following snippet to either your themes or child themes function.php file:<\/p>\n<pre><code>add_theme_support( 'avia_custom_shop_page' );<\/code><\/pre>\n<p>This will enable the Layout Builder for the default Shop page but also remove the default WooCommerce Products that would usually be displayed on that page. You then have to add them with a template builder element, just as in solution #1<\/p>\n<p>Please keep in mind that solution #2 is a Beta feature\u00a0and is still tested.<\/li>\n<\/ol>\n<\/div><\/section>\n<div  class='hr av-2mfmqzk-8-d7e27330c8d43097ab5204c6a80ec449 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-304k5v4-6-8aa702a9846b6b0edfbd319adcbb1c74 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Remove Border Radius from Product List Images<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-304k5v4-4-dbd903727c6d2b0252d60c4c3c49206d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The new Product List element added with Enfold version 3.0 will default to showing the images as circles by adding a large border radius to them. You can remove it to with this css snippet:<\/p>\n<pre>.<code>av-catalogue-image {\r\nborder-radius: 0;\r\n}<\/code><\/pre>\n<\/div><\/section>\n<div  class='hr av-2mfmqzk-5-648fe93f9cafbcad54b02e79d31ad325 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-304k5v4-3-86f5b09f9af17ea302551bbc0b109edb '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Change WooCommerce single product page layout<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-304k5v4-2-c34e7b48419badda965f217d8ae36950 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>In Enfold version 2.6 the WooCommerce configuration file was changed so that you can modify the single product layout through your child themes functions.php using the built css grid.<\/p>\n<p>For example, the following would give you a right sidebar:<\/p>\n<\/div><\/section>\n\n<div  class='hr av-21gn1g-841a593c6a472fc479638364de4676db hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-ld1ja1jb-090322814fa6ef08f6f85e653e9a25be '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Make WooCommerce images in the shop the same aspect ratio<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-ld1jbe22-3cf3796d0cd8dfdf779426ae973bd211 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Please add following code to Enfold theme options &gt; General Styling &gt; Quick CSS field:<\/p>\n<\/div><\/section>\n\n<section  class='av_textblock_section av-ld1jddhn-99f9c78fda63406700e71c7b41c815d2 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>STOP ENFOLD CROPPING IMAGES IN THE SHOP<\/strong><\/p>\n<p>Please add following code to Functions.php in your <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/child-theme\/\">child theme<\/a> in Appearance &gt; Editor.<\/p>\n<\/div><\/section>\n\n<section  class='av_textblock_section av-ld1jelhn-625fb971291c39b3e22cf7703c21c3c5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>NOTES:\u00a0<\/strong> Please adjust the aspect ratio to suit your <a href=\"https:\/\/refer.wordpress.com\/r\/84\/woocommerce\/\" target=\"_blank\" rel=\"nofollow noopener\">WooCommerce<\/a> Settings.<br \/>\n<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/aspect-ratio\" rel=\"nofollow\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/aspect-ratio<\/a><\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,12],"tags":[],"class_list":["post-8324","post","type-post","status-publish","format-standard","hentry","category-documentation","category-explore","documentation","explore"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/8324","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=8324"}],"version-history":[{"count":14,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/8324\/revisions"}],"predecessor-version":[{"id":13497,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/8324\/revisions\/13497"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=8324"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=8324"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=8324"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}