The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo...
22
The Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout that you you’ve created in your Divi library. Create a layout to use for every product page, for a specific category or tag, or override the default layout on the page level. In this manual we’ll take a look at what it can do and provide the information you need to get started quickly. We’ve included examples layouts for product pages and archive pages to help you get started. Quick Start The plugin is easy to use, requiring only a few steps to display your own layouts: 1. Install and activate the plugin 2. Create Divi Layouts in the Divi Library using the new WooCommerce modules 3. Choose the default layouts, categories, and tags in the Settings page 4. Choose specific layouts within each individual page Let’s look at each in more detail. 1. Installation and Activation Upload and activate the plugin. Make sure you have the WooCommerce plugin installed.
Transcript of The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo...
TheUltimateManualontheWooLayoutInjector
WooLayoutInjectorallowsyoutoreplacetheWooCommerceproductpagewithaDivilayoutthatyouyou’vecreatedinyourDivilibrary.Createalayouttouseforeveryproductpage,foraspecificcategoryortag,oroverridethedefaultlayoutonthepagelevel.Inthismanualwe’lltakealookatwhatitcandoandprovidetheinformationyouneedtogetstartedquickly.
We’veincludedexampleslayoutsforproductpagesandarchivepagestohelpyougetstarted.
QuickStartThepluginiseasytouse,requiringonlyafewstepstodisplayyourownlayouts:
1. Installandactivatetheplugin2. CreateDiviLayoutsintheDiviLibraryusingthenewWooCommercemodules3. Choosethedefaultlayouts,categories,andtagsintheSettingspage4. Choosespecificlayoutswithineachindividualpage
Let’slookateachinmoredetail.
1.InstallationandActivation
Uploadandactivatetheplugin.MakesureyouhavetheWooCommerceplugininstalled.
PluginLicensing
GotoWooCommerceinthedashboardandselectWooLayoutInjector.ThefirstitemiscalledPluginLicensing.EnteryourlicensekeyandclickSaveLicenseKey.
2.CreatingaLayout
LayoutsarecreatedintheDiviLibrary.GototheDiviLibrarywithintheDivimenuinthedashboard.SelectAddNew.
NamethetemplateandchooseLayoutforthetemplatetype.SelectSubmit.
ThiswillopentheDiviBuilderwhereyoucancreateyourlayout.InsertyourcolumnsandstartaddingthenewWooCommercemodulestobuildyourcustomlayout.
DiviBuilderModules
EachoftheWooCommerceelementshavebeenmadeintoamodulewithintheDiviBuilder,foratotalof18modulesthatyoucandraganddroptobuildthedesiredlayout.Mostareself-explanatory.We’lllookatafewindetail.
AsyoucanseeinthisexampleyoucanuseanyoftheDivimodulesinyourproductlayout.
3.ChooseDefaultLayouts
ThesettingspageislocatedwithintheWooCommercedashboardmenu.Theseareglobalsettingswhereyoucanchoosethedefaultlayoutsforproducts,archivepages,categories,andtags.Youcanoverridetheseforeachproductifyouwant.We’llseethisinstep4.
GeneralSettings
GeneralSettingsinclude:
Admintestmode–previewalayoutbeforeitgoeslive.
DisableWooCommerceImageZoom–keeptheproductimagefromzoomingonhover.
DisableCartCrossSell–turnoffsimilarproducts.
AddtoCartbuttonlabel–changethetextontheAddtoCartbutton.
PlaceholderImageURL–chooseadefaultimagethatwilldisplayasaplaceholderifthereisn’taproductimageselected.
ProductPageLayout
ProductPageLayout–choosethelayoutthatwilldisplaybydefault.
Category/TagOverrides–choosealayoutforeachcategoryortag.Iaddedacategoryandtagcalled“Watch”.You’llseeallofyourcategoriesandtagsinthelist.Youcanchooseadifferentlayoutforeachcategoryandtag.
ShopPage/ProductArchive/ProductCategories/ProductTagsLayout
ShopPage/ProductArchive/ProductCategories/ProductTagsLayout–choosethedefaultarchivelayoutfortheshoppage,categoryarchives,andtagarchives.
Category/TagOverrides–chooseanarchivelayoutforeachproductcategoryandtagindividually.Ihavetwocategories–WatchandBelt.Eachcategoryhasitsowndropdownbox.Allofyourproductscategoriesandtagswillappearinthislist.
4.ChooseLayoutsPerPage
AnewfeatureisaddedtotheProductpage(ontherightside)calledWooLayoutInjector.Thiswilloverridethedefaultlayout.Simplyselectyourlayoutfromthelistthatyouwanttodisplayforthisproduct.
AfterselectingthelayoutfromtheWooLayoutInjectordrop-downbox,theproductpagenowusesthelayoutyoubuiltintheDiviLibrary.Youcanmakechangestothislayoutandthosechangesareautomaticallyreflectedtoeveryproductthatusesthislayout.
Modules
EachoftheWooCommerceelementshavebeenmadeintotheirownmodulesoyoucanarrangethemanywayyouwantwithinyourlayouts.Mostmodulesareself-explanatoryandallusethefamiliarDivisettings.Here’salookatthosethatmightneedmoreinformation.
AdditionalInfoTab
TheAdditionalInfoTabmoduledisplaystheinformationfromWooattributes.
YoucanseetheadditioninfotabcontentinthisexampleundertheheadingAdditionalInformation.ItdisplayscustomattributesthatI’veaddedtotheproduct.
WooGeneral(legacy)
TheWooGeneral(Legacy)modulecontainsonlythetitle,price,description,quantity,add-to-cartbutton,categories,andtags.
ItprovidesthefeaturestogiveyouabasicWoolayout,butalsoletsyouaddyourownheader,footer,columnlayout,etc.,togiveyouahead-startoncreatingalayout.Irecommendusingtheindividualmodulesastheygiveyoumorecontrol,butthisisagoodplacetostartifyouwantthislayout.
WooLoopArchive
TheWooLoopArchivemodulecreatesarchivepagesusinglayoutsthatyou’vemade.ThismoduleisusedonapageratherthaninalayoutthatyoucreateintheDiviLibrary.
“Loop”isaconfusingterm.Itjustmeansthatthemodulewilldisplayalistofproducts–similartotheShopModule.
CreatealayoutforthelooptodisplayintheDivilibraryasnormal.You’llselectthislayoutfromtheWooLoopArchivemodule.I’vecreatedasimplelayoutthatincludestheproducttitle,thumbnails,andanexcerptwithreadmorebutton.
CreateapagethatwilldisplayyourarchivelistanddroptheWooLoopArchivemodulewithinyourDivilayout.
WithintheLoopArchivemoduleselectthelayoutintheLoopLayoutdropdownbox.Nextselectthelayoutdesign.YourchoicesareListandGrid.IfyouchooseGrid,selectthenumberofcolumnsthegridwilldisplay.Youcanchoose2,3,or4columns.
Youcancreateacustomqueryifyouwantmorecontrol.Enterthenumberofpoststodisplay,theoffsetnumber(thisishelpfulifyou’redisplayinganotherproductonthepage),andtaxonomies.
Themodulewilldisplaythelayoutyoucreatedusingthelayoutdesignyouchoose.I’vechosena2-columngridlayout.
Tosetthepageasthearchive,gotoWooLayoutInjectorsettingsintheWooCommercedashboardmenu.ScrolltoShopPage/ProductArchive/ProductCategories/ProductTagsLayoutandchoosethepagewithinthedropdownbox.I’vesetalayoutcalledarchivelistastheCategoryArchivespage.Nowwhenthecategoryisclickedthisisthepagethatwillload.
CommonProblemsHere’salistofthecommonproblemsandtheirsolutions.Ifsomethingisn’tworkingasexpectedpleasecheckthissectionforasolution.
GlobalModulesThisplugindoesn'tsupportglobalmodules.Ifyouaddaglobalmoduletoalayoutitbreaksthepage.
Youcanstilluseglobalmodules,butyou’llneeddisabletheglobalfeature.
RightclickontheglobalmoduleandthenclickDisableGlobal.
Themoduleisnolongerglobal(whichmeansIwillchangetheadminlabel),butalloftheglobalfeaturesforthismoduleuptothispointareintact.
VisualBuilder
Third-partypluginsdon’tworkinthevisualbuilder.AnylayoutsthatincludeWooLayoutInjectormoduleswillshowNoResultsFound.Themoduleswillnotbeincludedinthelistofmodules.Thisisnormalandisexpected.
LayoutOverride
Ifyourproductisn’tshowingthelayoutyouwanted,makesurethatyou’veselectedthelayoutintheWooLayoutInjectordropdownboxtotherightoftheeditor.You’llhavetocreatethelayoutsfirst.
Archives
Youhaveseveraloptionsforarchivepages.Youcancreateagenericlayouttocoveralltypesofarchives,orcreatedifferentarchivepagefortheshop,productcategoryarchive,tagarchive,orindividualterms.
ShopPage/ProductArchive/ProductCategories/ProductTagsLayout
Category/TagOverrides
Zoom
ThereisaknownbugthatwasintroducedinWoo3.0thatcausesthehoverzoomanimationtosometimesworkandsometimesnot.YoucandisabletheWooCommerceImageZoomintheWooLayoutInjectorGeneralSettingsinthedashboardmenu.AfutureupdatetoWooInjectorwilldisablethehoverzoomfunctionofWooCommerceandreplaceit.
PluginCompatibilityThepagebuilderforDiviisdifferentthanotherWordPressthemes-theInjectorisnotcompatiblewithotherWoopluginsbecauseitisspecificallydesignedtobeusedwithDiviandhencehasrequirementsotherthemesdon’thave.
Becauseofthisalotofthirdpartypluginswon'tfunctionproperly,butthisdoesn’tmeanitwillcauseissues.Ifthethirdpartyplugineffectstheproductpagethenitmaynotwork.IfiteffectsanyotherpartoftheWoosystemthenitwillmostlikelyworkfine.
Iknowthiscanbeaproblem,soI’mwillingtohelponapercasebasis.Togethelpopenasupportticketandincludeacopyofthepluginyouwanttouse.I'llgetitintegratedASAP.
Tocreateasupportticket,goto:TortoiseITSupportTicketSystem
OrpastethisURLintoyourbrowser’saddressbar:http://www.sean-barton.co.uk/support/
LayoutsWe’veincludedtheproductpageandarchivelayoutexamplesfromthisguideasJSONfilestohelpyougetstartedquickly.Here’showtoimportthem.
Toimportthem,navigatetoDivi,LibraryinthedashboardandselectImport&Exportatthetopleftofthescreen.
ClickImportandselectChooseFile.Navigatetothefolderwhereyou’veplacedthefileandselectit.ClickImportDiviBuilderLayouts.Waitfortheimporttocomplete.ThelayoutwillnowbeavailableinyourDiviLibrary.
MoreInformationYoucanseethebasicinformation,avideodemonstration,andexampleshere:WooLayoutInjectorBasicInformation
Alternately,youcancopyandpastethisURLintoyourbrowser’saddressbar:http://docs.tortoise-it.co.uk/woo-layout-injector/
Createasupporttickethere:TortoiseITSupportTicketSystem
Alternately,youcancopyandpastethisURLintoyourbrowser’saddressbar:http://www.sean-barton.co.uk/support/
Note-TheproductimagesinthisguidearefromUnsplash.comandarenotincludedwiththisplugin.
