https://angry-gates-bead98.netlify.app/assets/js/28ccd462.5e7558cd.js

1"use strict";(globalThis.webpackChunkdocs=globalThis.webpackChunkdocs||[]).push([[16283],{15680(e,t,o){o.d(t,{xA:()=>s,yg:()=>p});var r=o(96540);function a(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function n(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),o.push.apply(o,r)}return o}function i(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?n(Object(o),!0).forEach((function(t){a(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}function l(e,t){if(null==e)return{};var o,r,a=function(e,t){if(null==e)return{};var o,r,a={},n=Object.keys(e);for(r=0;r<n.length;r++)o=n[r],t.indexOf(o)>=0||(a[o]=e[o]);return a}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(r=0;r<n.length;r++)o=n[r],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(a[o]=e[o])}return a}var c=r.createContext({}),m=function(e){var t=r.useContext(c),o=t;return e&&(o="function"==typeof e?e(t):i(i({},t),e)),o},s=function(e){var t=m(e.components);return r.createElement(c.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},g=r.forwardRef((function(e,t){var o=e.components,a=e.mdxType,n=e.originalType,c=e.parentName,s=l(e,["components","mdxType","originalType","parentName"]),g=m(o),p=a,y=g["".concat(c,".").concat(p)]||g[p]||u[p]||n;return o?r.createElement(y,i(i({ref:t},s),{},{components:o})):r.createElement(y,i({ref:t},s))}));function p(e,t){var o=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var n=o.length,i=new Array(n);i[0]=g;var l={};for(var c in t)hasOwnProperty.call(t,c)&&(l[c]=t[c]);l.originalType=e,l.mdxType="string"==typeof e?e:a,i[1]=l;for(var m=2;m<n;m++)i[m]=o[m];return r.createElement.apply(null,i)}return r.createElement.apply(null,o)}g.displayName="MDXCreateElement"},27711(e,t,o){o.r(t),o.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>u,frontMatter:()=>n,metadata:()=>l,toc:()=>m});var r=o(58168),a=(o(96540),o(15680));const n={id:"create-a-singular-themer-layout-for-woocommerce",title:"Singular layout for WooCommerce",sidebar_label:"Singular layout for WooCommerce"},i=void 0,l={unversionedId:"integrations/woocommerce/create-a-singular-themer-layout-for-woocommerce",id:"integrations/woocommerce/create-a-singular-themer-layout-for-woocommerce",title:"Singular layout for WooCommerce",description:"You can use the Singular Themer layout to design WooCommerce single product pages.",source:"@site/beaver-themer/integrations/woocommerce/create-a-singular-themer-layout-for-woocommerce.md",sourceDirName:"integrations/woocommerce",slug:"/integrations/woocommerce/create-a-singular-themer-layout-for-woocommerce",permalink:"/beaver-themer/integrations/woocommerce/create-a-singular-themer-layout-for-woocommerce",draft:!1,tags:[],version:"current",frontMatter:{id:"create-a-singular-themer-layout-for-woocommerce",title:"Singular layout for WooCommerce",sidebar_label:"Singular layout for WooCommerce"},sidebar:"beaverthemer",previous:{title:"Archive layout for WooCommerce",permalink:"/beaver-themer/integrations/woocommerce/create-an-archive-themer-layout-for-woocommerce"},next:{title:"Singular or Archive layout: Breadcrumb module",permalink:"/beaver-themer/integrations/woocommerce/breadcrumb-module-for-woocommerce-singular-and-archive-themer-layouts"}},c={},m=[{value:"1 Create a Singular themer layout",id:"1-create-a-singular-themer-layout",level:2},{value:"2 Edit the Singular themer layout",id:"2-edit-the-singular-themer-layout",level:2},{value:"Special WooCommerce modules for the Singular Themer layout",id:"special-woocommerce-modules-for-the-singular-themer-layout",level:2}],s={toc:m};

1function u(e){let{components:t,...n}=e;return(0,a.yg)("wrapper",(0,r.A)({},s,n,{components:t,mdxType:"MDXLayout"}),(0,a.yg)("p",null,"You can use the Singular Themer layout to design WooCommerce single product pages."),(0,a.yg)("admonition",{type:"info"},(0,a.yg)("p",{parentName:"admonition"},"The WooCommerce modules that you use in Beaver Themer to lay out single product pages have standard WooCommerce functionality. The WooCommerce modules provide a convenient way to style the page and show or hide various WooCommerce components.")),(0,a.yg)("div",{className:"embed-responsive"},(0,a.yg)("iframe",{width:"560",height:"315",src:"https://www.youtube.com/embed/Jz8MXyPrF50",frameBorder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:""})),(0,a.yg)("p",null,"Here's how to create a Themer layout for a WooCommerce single product page."),(0,a.yg)("h2",{id:"1-create-a-singular-themer-layout"},"1 Create a Singular themer layout"),(0,a.yg)("ol",null,(0,a.yg)("li",{parentName:"ol"},"In the WordPress admin panel, click ",(0,a.yg)("strong",{parentName:"li"},"Beaver Builder > Themer layouts"),"."),(0,a.yg)("li",{parentName:"ol"},"Click the ",(0,a.yg)("strong",{parentName:"li"},"Add New")," button at the top of the page."),(0,a.yg)("li",{parentName:"ol"},"Enter a title for your Themer layout."),(0,a.yg)("li",{parentName:"ol"},"Verify that ",(0,a.yg)("strong",{parentName:"li"},"Type")," is ",(0,a.yg)("strong",{parentName:"li"},"Themer layout")," and for ",(0,a.yg)("strong",{parentName:"li"},"Layout")," select ",(0,a.yg)("strong",{parentName:"li"},"Singular"),", then click ",(0,a.yg)("strong",{parentName:"li"},"Add Themer layout"),".",(0,a.yg)("br",{parentName:"li"}),"The ",(0,a.yg)("strong",{parentName:"li"},"Edit Themer layout")," screen opens.")),(0,a.yg)("h2",{id:"2-edit-the-singular-themer-layout"},"2 Edit the Singular themer layout"),(0,a.yg)("ol",null,(0,a.yg)("li",{parentName:"ol"},"For ",(0,a.yg)("strong",{parentName:"li"},"Location"),", click ",(0,a.yg)("strong",{parentName:"li"},"Choose"),", then select ",(0,a.yg)("strong",{parentName:"li"},"Product")," from the ",(0,a.yg)("strong",{parentName:"li"},"Products")," category. In the field next to it, select ",(0,a.yg)("strong",{parentName:"li"},"All products"),"."),(0,a.yg)("li",{parentName:"ol"},"Click ",(0,a.yg)("strong",{parentName:"li"},"Publish"),", then click ",(0,a.yg)("strong",{parentName:"li"}

1,"Launch Beaver Builder"),"."),(0,a.yg)("li",{parentName:"ol"},"Click the Plus icon in the upper right corner, then click the ",(0,a.yg)("strong",{parentName:"li"},"Templates")," tab."),(0,a.yg)("li",{parentName:"ol"},"Select the ",(0,a.yg)("strong",{parentName:"li"},"Product"),"  layout template, then click ",(0,a.yg)("strong",{parentName:"li"},"Replace existing layout"),".")),(0,a.yg)("p",null,"Now you have an initial layout for a WooCommerce single product page, previewing one of the WooCommerce sample products."),(0,a.yg)("p",null,(0,a.yg)("img",{src:o(87235).A,width:"600",height:"594"})),(0,a.yg)("admonition",{type:"tip"},(0,a.yg)("mdxAdmonitionTitle",{parentName:"admonition"},(0,a.yg)("strong",{parentName:"mdxAdmonitionTitle"},"Tip")),(0,a.yg)("p",{parentName:"admonition"},"It's easier to design the layout if you already have at least one product created. You can preview the product as you work and see the information that will appear. If you're not ready to create your own products, you can ",(0,a.yg)("a",{parentName:"p",href:"https://docs.woocommerce.com/document/importing-woocommerce-sample-data/"},"upload WooCommerce sample product data"),".")),(0,a.yg)("p",null,"You can preview any of your products by clicking the down arrow in the ",(0,a.yg)("strong",{parentName:"p"},"Preview as")," box at the top of the editor, then expanding the ",(0,a.yg)("strong",{parentName:"p"},"Product")," category as shown in the following screenshot, then choosing one of your products."),(0,a.yg)("p",null,(0,a.yg)("img",{src:o(34204).A,width:"543",height:"687"})),(0,a.yg)("p",null,"In the template that you added, if the product that you're previewing doesn't have any data to display, the connection code is displayed instead, which you can recognize as words connected with underscores. In the screenshot above of the template, you can see several modules with their connection codes, such as ",(0,a.yg)("inlineCode",{parentName:"p"},"woocommerce_template_single_rating"),"."),(0,a.yg)("h2",{id:"special-woocommerce-modules-for-the-singular-themer-layout"},"Special WooCommerce modules for the Singular Themer layout"),(0,a.yg)("p",null,"To access the special WooCommerce modules:"),(0,a.yg)("ol",null,(0,a.yg)("li",{parentName:"ol"},"In the upper right corner, click the Plus icon to expand the Content panel."),(0,a.yg)("li",{parentName:"ol"},"On the ",(0,a.yg)("strong",{parentName:"li"},"Modules")," tab, click ",(0,a.yg)("strong",{parentName:"li"},"Group"),", then select ",(0,a.yg)("strong",{parentName:"li"},"Themer modules"),".")),(0,a.yg)("p",null,"You'll see the section containing all the WooCommerce modules, as shown in the following screenshot. Most of these modules are used in the Themer Product layout template that you chose in the previous procedure."),(0,a.yg)("p",null,(0,a.yg)("img",{src:o(73401).A,width:"333",height:"653"})),(0,a.yg)("admonition",{type:"tip"},(0,a.yg)("mdxAdmonitionTitle",{parentName:"admonition"},(0,a.yg)("strong",{parentName:"mdxAdmonitionTitle"},"Tip")),(0,a.yg)("p",{parentName:"admonition"},"You can insert a WooCommerce product image gallery into a layout by inserting the ",(0,a.yg)("strong",{parentName:"p"},"Product Gallery Images")," field connection into the ",(0,a.yg)("strong",{parentName:"p"},"Photos")," field of a standard Gallery module, as shown in the following screenshot."),(0,a.yg)("p",{parentName:"admonition"},(0,a.yg)("img",{src:o(53847).A,width:"600",height:"389"}))))}u.isMDXComponent=!0},34204(e,t,o){o.d(t,{A:()=>r});const r=o.p+"assets/images/create-a-singular-themer-layout-for-woocommerce-227d25be-88746152e26f6eaaff3782c831819def.png"},73401(e,t,o){o.d(t,{A:()=>r});const r=o.p+"assets/images/create-a-singular-themer-layout-for-woocommerce-3648ac58-f7c1b8daca4ea29330eb5bba51938384.png"},87235(e,t,o){o.d(t,{A:()=>r});const r=o.p+"assets/images/create-a-singular-themer-layout-for-woocommerce-49d7f0a9-dbc7b12dd70976346c8a2fbf6ce4b47c.png"},53847(e,t,o){o.d(t,{A:()=>r});const r=o.p+"assets/images/create-a-singular-themer-layout-for-woocommerce-b101bc56-fe0cfd17b71be5b805c88f4d33650cd2.png"}}]);