Upload
others
View
37
Download
3
Embed Size (px)
Citation preview
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.