Premium add-on for Bricks Builder

Compare

Compare Products
Compare Products

Compare is a 3rd party element for the Bricks page builder. It is not only for WooCommerce, but it is also compatible with custom post-type content(CPT) and you can avoid the extra plugin. You can check the preview on the builder editor and customize every element from the editor directly. This element comes with 3 sub-elements.

    1. Add To Compare
    2. Compare Counter
    3. Compare Item which is creating a compare list.

You should get this element under the Bricks->BricksUltimate ->General Elements tab. By default, this element is disabled.

This element will work inside the query loop builder, products element, related products element, and up-sells products element.

Add the Add To Compare button

Add to compare button

#1: Here we are running the product loop builder. So, we shall add an outer container which will help to make the grid or listing layout.

#2: Now we shall put a block element inside the outer container and enable the query loop builder. You can use post, CPT, or WooCommerce product post type. In this example, WooCommerce product post type is used.

#3: Add the Add To Compare element inside the loop builder. Make sure that you enabled this element from the Bricks -> BricksUltimate -> General Elements tab.

#4: Setup the Add To Compare element. It has a lot of settings. You should adjust those settings as per your design. Here the post-type field is more important and it plays a vital role. It is a mandatory field. If you choose the wrong post type, you will get the wrong result.

Adding Compare Counter to Header Bar

#1: Open your Header template

#2: Add the Compare Counter element to your header template. The post-type field is more important and it plays a vital role. It is a mandatory field. If you choose the wrong post type, you will get the wrong result. It has some other extra settings like:

  • Enable / Disable counter bubble
  • Link the button with the compare listing page
  • Change icon, icon size, color, etc.

Creating The Compare Page

Compare Items

#1: Open the builder editor

#2: Put the Compare Items element on the canvas

#3: Add the content one by one. You can add any content like custom field data, post title, image, rating, button, etc.

JSON Code of the Compare Page

{"content":[{"id":"apsedz","name":"section","parent":0,"children":["zszdiz","vjoxbu","bdkzly"],"settings":[]},{"id":"zszdiz","name":"container","parent":"apsedz","children":["viubou","tzuxve"],"settings":{"wooQueryTpes":"none","productsNumber":3,"cat_operator":"IN","outofstock":"yes","show_hidden":"no","hide_free":"no","order_by":"date","ordersType":"all","ordersCustomer":"logged_in","order":"DESC","exclude_expiry_coupons":true,"_margin":{"top":"30"}}},{"id":"viubou","name":"heading","parent":"zszdiz","children":[],"settings":{"text":"Compare Items","tag":"h1","_typography":{"font-size":"20","font-family":"Lato","font-weight":"700","text-transform":"uppercase"}}},{"id":"tzuxve","name":"divider","parent":"zszdiz","children":[],"settings":{"color":{"hex":"#ededed"},"_margin":{"top":"5"}}},{"id":"vjoxbu","name":"container","parent":"apsedz","children":["licama","kyyezm","dpmjjf","irpeyf"],"settings":{"wooQueryTpes":"none","productsNumber":3,"cat_operator":"IN","outofstock":"yes","show_hidden":"no","hide_free":"no","order_by":"date","ordersType":"all","ordersCustomer":"logged_in","order":"DESC","exclude_expiry_coupons":true,"_alignSelf":"center","_direction":"column","_alignItems":"center","_rowGap":"20","_justifyContent":"center","_margin":{"top":"100","bottom":"60"},"_conditions":[[{"id":"sgajlr","key":"has_compare_items","value":"product","compare":"!="}]],"_direction:mobile_portrait":"column","_flexWrap:mobile_portrait":"nowrap","_direction:desktop_landscape":"column","_flexWrap:desktop_landscape":"nowrap","_margin:mobile_landscape":{"top":"70"}}},{"id":"licama","name":"icon","parent":"vjoxbu","children":[],"settings":{"icon":{"library":"themify","icon":"ti-control-shuffle"},"fetchType":"post","iconSize":"120","iconColor":{"hex":"#e0e0e0"},"_typography:mobile_portrait":{"font-size":"100"}}},{"id":"kyyezm","name":"heading","parent":"vjoxbu","children":[],"settings":{"text":"Compare list is empty.","tag":"h2","_typography":{"font-size":"45","font-weight":"600"},"_typography:mobile_portrait":{"font-size":"28"}}},{"id":"dpmjjf","name":"text-basic","parent":"vjoxbu","children":[],"settings":{"text":"You don't have any products on the wishlist yet.<br>You will find over 300 products on our <strong>\"Shop\"</strong> page.","tag":"p","_typography":{"text-align":"center","color":{"hex":"#737373"},"font-size":"16","line-height":"1.5"},"_typography:mobile_portrait":{"font-size":"14"}}},{"id":"irpeyf","name":"button","parent":"vjoxbu","children":[],"settings":{"text":"Return to shop","fetchType":"post","_padding":{"top":"12","bottom":"12","left":"24","right":"24"},"_background":{"color":{"hex":"#83b735","id":"wcdvhx","name":"Color #2"}},"_cssGlobalClasses":["xeiryt"],"_background:hover":{"color":{"hex":"#74a32f","id":"opteqa","name":"Color #1"}},"_typography":{"color":{"hex":"#ffffff","id":"augvuj","name":"Color #3"},"font-size":"12","text-transform":"uppercase","font-weight":"700"},"_margin":{"top":"10"},"link":{"type":"internal","postId":"6"}}},{"id":"bdkzly","name":"container","parent":"apsedz","children":["sppkvq"],"settings":{"wooQueryTpes":"none","productsNumber":3,"cat_operator":"IN","outofstock":"yes","show_hidden":"no","hide_free":"no","order_by":"date","ordersType":"all","ordersCustomer":"logged_in","order":"DESC","exclude_expiry_coupons":true,"_conditions":[[{"id":"hwcjwu","key":"has_compare_items","value":"product"}]],"_margin":{"top":"30"},"_gridTemplateColumns:mobile_landscape":"1fr 1fr","_gridTemplateColumns:mobile_portrait":"1fr"}},{"id":"sppkvq","name":"bu-compare-items","parent":"bdkzly","children":[],"settings":{"postType":"product","fields":[{"id":"hjhink","type":"element","label":"Remove","element":"delete","linkIcon":{"library":"themify","icon":"ti-close"},"linkIconPosition":"left","gap":"2px","iconSize":{"color":{"hex":"#ff743d","id":"opjrgy","name":"Color #8"}}},{"id":"ztasxr","type":"dynamicdata","label":"Image","content":"Compare Products"},{"id":"vzokif","type":"element","label":"Title","element":"heading","linkTo":{"type":"meta","useDynamicData":"https://www.bricksultimate.com/doc/compare/"},"headingText":"Compare","headingTg":{"font-weight":"700","font-family":"Lato","text-transform":"capitalize"}},{"id":"ciapai","type":"dynamicdata","label":"Price","content":"{woo_product_price}"},{"id":"mmizoo","type":"element","label":"Quantity","element":"qty"},{"id":"rmskna","type":"dynamicdata","label":"Rating","content":"{woo_product_rating:format}"},{"id":"ifuqpj","type":"element","label":"Button","element":"buatc"},{"id":"qyhxgq","type":"dynamicdata","label":"Sku","content":"{woo_product_sku}"},{"id":"ulyikr","label":"Stock","type":"dynamicdata","content":"{woo_product_stock_status}"},{"id":"lfaqjn","type":"element","label":"Remove","element":"delete","linkIcon":{"library":"themify","icon":"ti-close"},"linkIconPosition":"left","gap":"2px","iconSize":{"color":{"hex":"#ff743d","id":"opjrgy","name":"Color #8"}}}],"lblMW":"80px","lblFont":{"text-transform":"uppercase","font-weight":"500","font-family":"Poppins"},"lblBG":{"hex":"#fafafa"},"starSize":"13","atcBg":{"hex":"#83b735","id":"wcdvhx","name":"Color #2"},"atcTg":{"color":{"hex":"#ffffff","id":"augvuj","name":"Color #3"},"text-transform":"uppercase","font-size":"10"},"atcBg:hover":{"hex":"#74a32f","id":"opteqa","name":"Color #1"},"qtyTg":{"color":{"hex":"#a3a3a3"}},"lblFont:mobile_landscape":{"font-size":"12"},"lblPad:mobile_landscape":{"right":"16","left":"16"},"regularPriceTypography":{"color":{"hex":"#bfbfbf"}},"salePriceTypography":{"color":{"hex":"#83b735","id":"wcdvhx","name":"Color #2"},"font-weight":"600"},"hideRegularPrice":true,"leftArrow":{"library":"themify","icon":"ti-angle-left"},"rightArrow":{"library":"themify","icon":"ti-angle-right"},"arrowBGColor:hover":{"hex":"#83b735","id":"wcdvhx","name":"Color #2"},"arrowColor:hover":{"hex":"#ffffff","id":"augvuj","name":"Color #3"},"arrowHColor":{"hex":"#ffffff","id":"augvuj","name":"Color #3"},"arrowColor":{"hex":"#9e9e9e","id":"dxbvjm","name":"Color #7"},"lblW":"100px","rmBtnIconHClr":{"hex":"#83b735","id":"wcdvhx","name":"Color #2"},"rmBtnTg:hover":{"color":{"hex":"#83b735","id":"wcdvhx","name":"Color #2"}},"rmBtnIconTg":{"font-size":"14","color":{"hex":"#808080"}}}}],"source":"bricksCopiedElements","sourceUrl":"https://products.bricksultimate.com/classic","version":"1.9.4","globalClasses":[{"id":"xeiryt","name":"buc-transition-all","settings":[]}],"globalElements":[]}

Adding Notify Template

It is the section type template. At first, you will create a section template (Bricks -> Templates -> Add New) and make the notification layout. After creating the template, you will go to the Add To Compare element. There is a notification template dropdown field. Select your correct template and save the settings.

JSON Code of the Notice Template

{"content":[{"id":"pjvuna","name":"section","parent":0,"children":["topwpz"],"settings":{"_widthMax":"340","_margin":{"top":"15"},"_boxShadow":{"values":{"offsetX":"0","offsetY":"0","blur":"2"},"color":{"hex":"#c2c2c2"}},"_padding":{"top":"15","right":"15","bottom":"15","left":"15"},"_background":{"color":{"hex":"#ffffff","id":"augvuj","name":"Color #3"}},"_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"hex":"#fafafa"}}}},{"id":"topwpz","name":"container","parent":"pjvuna","children":["xqvtsa","kbffub","gdbvff"],"settings":{"wooQueryTpes":"none","productsNumber":3,"cat_operator":"IN","outofstock":"yes","show_hidden":"no","hide_free":"no","order_by":"date","ordersType":"all","ordersCustomer":"logged_in","order":"DESC","exclude_expiry_coupons":true,"hasLoop":true,"query":{"post_type":["product"],"posts_per_page":"1","ignore_sticky_posts":true,"disable_query_merge":true},"_padding":{"left":"0","bottom":"0"},"_direction":"row","_columnGap":"10","_position":"relative","_flexWrap:mobile_landscape":"nowrap"}},{"id":"xqvtsa","name":"image","parent":"topwpz","children":[],"settings":{"image":{"useDynamicData":"Compare Products","size":"thumbnail"},"_width":"79","link":"url","url":{"type":"meta","useDynamicData":"https://www.bricksultimate.com/doc/compare/"}}},{"id":"qdphxl","name":"text-basic","parent":"kbffub","children":[],"settings":{"text":"<strong>Compare</strong> has been successfully added to the compare list.","_typography":{"color":{"hex":"#666666"},"font-size":"14"},"tag":"div","_margin":{"bottom":"5"}}},{"id":"ghsoqn","name":"button","parent":"kbffub","children":[],"settings":{"text":"View Compare List","fetchType":"post","_padding":{"top":"0","right":"0","bottom":"0","left":"0"},"link":{"type":"internal","postId":"758","ariaLabel":"view cart"},"_typography":{"text-transform":"uppercase","font-size":"10","color":{"hex":"#333333","id":"vwtjvj","name":"Color #4"},"font-weight":"700"},"_typography:hover":{"color":{"hex":"#83b735","id":"wcdvhx","name":"Color #2"}},"_cssGlobalClasses":["qcsyvq"],"_border":{"width":{"bottom":"1"},"style":"solid","color":{"hex":"#9e9e9e","id":"dxbvjm","name":"Color #7"}},"_border:hover":{"color":{"hex":"#83b735","id":"wcdvhx","name":"Color #2"}}}},{"id":"kbffub","name":"div","parent":"topwpz","children":["qdphxl","ghsoqn"],"settings":{"wooQueryTpes":"none","productsNumber":3,"cat_operator":"IN","outofstock":"yes","show_hidden":"no","hide_free":"no","order_by":"date","ordersType":"all","ordersCustomer":"logged_in","order":"DESC","exclude_expiry_coupons":true,"fetchType":"post"}},{"id":"gdbvff","name":"icon","parent":"topwpz","children":[],"settings":{"icon":{"library":"themify","icon":"ti-close"},"fetchType":"post","iconSize":"13","_position":"absolute","_top":"-7","_right":"-6","iconColor":{"hex":"#9e9e9e","id":"dxbvjm","name":"Color #7"},"iconColor:hover":{"hex":"#333333","id":"vwtjvj","name":"Color #4"}}}],"source":"bricksCopiedElements","sourceUrl":"https://products.bricksultimate.com/classic","version":"1.9.4","globalClasses":[{"id":"qcsyvq","name":"buc-transition-color","settings":[]}],"globalElements":[]}