the ultimate manual on the woo layout injectorthe ultimate manual on the woo layout injector woo...
TRANSCRIPT
![Page 1: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/1.jpg)
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.
![Page 2: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/2.jpg)
PluginLicensing
GotoWooCommerceinthedashboardandselectWooLayoutInjector.ThefirstitemiscalledPluginLicensing.EnteryourlicensekeyandclickSaveLicenseKey.
2.CreatingaLayout
LayoutsarecreatedintheDiviLibrary.GototheDiviLibrarywithintheDivimenuinthedashboard.SelectAddNew.
NamethetemplateandchooseLayoutforthetemplatetype.SelectSubmit.
![Page 3: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/3.jpg)
ThiswillopentheDiviBuilderwhereyoucancreateyourlayout.InsertyourcolumnsandstartaddingthenewWooCommercemodulestobuildyourcustomlayout.
![Page 4: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/4.jpg)
DiviBuilderModules
EachoftheWooCommerceelementshavebeenmadeintoamodulewithintheDiviBuilder,foratotalof18modulesthatyoucandraganddroptobuildthedesiredlayout.Mostareself-explanatory.We’lllookatafewindetail.
![Page 5: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/5.jpg)
AsyoucanseeinthisexampleyoucanuseanyoftheDivimodulesinyourproductlayout.
3.ChooseDefaultLayouts
![Page 6: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/6.jpg)
ThesettingspageislocatedwithintheWooCommercedashboardmenu.Theseareglobalsettingswhereyoucanchoosethedefaultlayoutsforproducts,archivepages,categories,andtags.Youcanoverridetheseforeachproductifyouwant.We’llseethisinstep4.
GeneralSettings
GeneralSettingsinclude:
Admintestmode–previewalayoutbeforeitgoeslive.
DisableWooCommerceImageZoom–keeptheproductimagefromzoomingonhover.
DisableCartCrossSell–turnoffsimilarproducts.
AddtoCartbuttonlabel–changethetextontheAddtoCartbutton.
PlaceholderImageURL–chooseadefaultimagethatwilldisplayasaplaceholderifthereisn’taproductimageselected.
ProductPageLayout
ProductPageLayout–choosethelayoutthatwilldisplaybydefault.
![Page 7: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/7.jpg)
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.
![Page 8: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/8.jpg)
4.ChooseLayoutsPerPage
AnewfeatureisaddedtotheProductpage(ontherightside)calledWooLayoutInjector.Thiswilloverridethedefaultlayout.Simplyselectyourlayoutfromthelistthatyouwanttodisplayforthisproduct.
![Page 9: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/9.jpg)
AfterselectingthelayoutfromtheWooLayoutInjectordrop-downbox,theproductpagenowusesthelayoutyoubuiltintheDiviLibrary.Youcanmakechangestothislayoutandthosechangesareautomaticallyreflectedtoeveryproductthatusesthislayout.
Modules
EachoftheWooCommerceelementshavebeenmadeintotheirownmodulesoyoucanarrangethemanywayyouwantwithinyourlayouts.Mostmodulesareself-explanatoryandallusethefamiliarDivisettings.Here’salookatthosethatmightneedmoreinformation.
![Page 10: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/10.jpg)
AdditionalInfoTab
TheAdditionalInfoTabmoduledisplaystheinformationfromWooattributes.
YoucanseetheadditioninfotabcontentinthisexampleundertheheadingAdditionalInformation.ItdisplayscustomattributesthatI’veaddedtotheproduct.
![Page 11: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/11.jpg)
WooGeneral(legacy)
TheWooGeneral(Legacy)modulecontainsonlythetitle,price,description,quantity,add-to-cartbutton,categories,andtags.
ItprovidesthefeaturestogiveyouabasicWoolayout,butalsoletsyouaddyourownheader,footer,columnlayout,etc.,togiveyouahead-startoncreatingalayout.Irecommendusingtheindividualmodulesastheygiveyoumorecontrol,butthisisagoodplacetostartifyouwantthislayout.
![Page 12: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/12.jpg)
WooLoopArchive
TheWooLoopArchivemodulecreatesarchivepagesusinglayoutsthatyou’vemade.ThismoduleisusedonapageratherthaninalayoutthatyoucreateintheDiviLibrary.
“Loop”isaconfusingterm.Itjustmeansthatthemodulewilldisplayalistofproducts–similartotheShopModule.
![Page 13: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/13.jpg)
CreatealayoutforthelooptodisplayintheDivilibraryasnormal.You’llselectthislayoutfromtheWooLoopArchivemodule.I’vecreatedasimplelayoutthatincludestheproducttitle,thumbnails,andanexcerptwithreadmorebutton.
CreateapagethatwilldisplayyourarchivelistanddroptheWooLoopArchivemodulewithinyourDivilayout.
![Page 14: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/14.jpg)
WithintheLoopArchivemoduleselectthelayoutintheLoopLayoutdropdownbox.Nextselectthelayoutdesign.YourchoicesareListandGrid.IfyouchooseGrid,selectthenumberofcolumnsthegridwilldisplay.Youcanchoose2,3,or4columns.
![Page 15: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/15.jpg)
Youcancreateacustomqueryifyouwantmorecontrol.Enterthenumberofpoststodisplay,theoffsetnumber(thisishelpfulifyou’redisplayinganotherproductonthepage),andtaxonomies.
![Page 16: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/16.jpg)
Themodulewilldisplaythelayoutyoucreatedusingthelayoutdesignyouchoose.I’vechosena2-columngridlayout.
Tosetthepageasthearchive,gotoWooLayoutInjectorsettingsintheWooCommercedashboardmenu.ScrolltoShopPage/ProductArchive/ProductCategories/ProductTagsLayoutandchoosethepagewithinthedropdownbox.I’vesetalayoutcalledarchivelistastheCategoryArchivespage.Nowwhenthecategoryisclickedthisisthepagethatwillload.
CommonProblemsHere’salistofthecommonproblemsandtheirsolutions.Ifsomethingisn’tworkingasexpectedpleasecheckthissectionforasolution.
GlobalModulesThisplugindoesn'tsupportglobalmodules.Ifyouaddaglobalmoduletoalayoutitbreaksthepage.
Youcanstilluseglobalmodules,butyou’llneeddisabletheglobalfeature.
![Page 17: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/17.jpg)
RightclickontheglobalmoduleandthenclickDisableGlobal.
Themoduleisnolongerglobal(whichmeansIwillchangetheadminlabel),butalloftheglobalfeaturesforthismoduleuptothispointareintact.
![Page 18: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/18.jpg)
VisualBuilder
Third-partypluginsdon’tworkinthevisualbuilder.AnylayoutsthatincludeWooLayoutInjectormoduleswillshowNoResultsFound.Themoduleswillnotbeincludedinthelistofmodules.Thisisnormalandisexpected.
![Page 19: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/19.jpg)
LayoutOverride
Ifyourproductisn’tshowingthelayoutyouwanted,makesurethatyou’veselectedthelayoutintheWooLayoutInjectordropdownboxtotherightoftheeditor.You’llhavetocreatethelayoutsfirst.
Archives
![Page 20: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/20.jpg)
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.
![Page 21: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/21.jpg)
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
![Page 22: The Ultimate Manual on the Woo Layout InjectorThe Ultimate Manual on the Woo Layout Injector Woo Layout Injector allows you to replace the WooCommerce product page with a Divi layout](https://reader030.vdocument.in/reader030/viewer/2022040100/5e53d3a63c47ff640c077663/html5/thumbnails/22.jpg)
Alternately,youcancopyandpastethisURLintoyourbrowser’saddressbar:http://www.sean-barton.co.uk/support/
Note-TheproductimagesinthisguidearefromUnsplash.comandarenotincludedwiththisplugin.