WooCommerce Loop Template, Bricks Builder

This a simple woocommerce product template just copy paste to your editor to use it. Ofcoruse you need build your own loop with woocommrce to use it. I usualy create a template section on bricks templates and then call this like a component. If you need to change anything you just need to change in one place so I would recommend the same.

The wishlist implementation is here if you want that as well.

{"content":[{"id":"rdffsg","name":"block","parent":0,"children":["ratork","tiiuzj","elided"],"settings":{"_columnGap":"20","_rowGap":"20","_height":"100%","_padding:tablet_portrait":{"top":"20","right":"20","bottom":"20","left":"20"},"_cssCustom":"#brxe-rdffsg .hover-card-button{\n  opacity:0\n}\n\n\n#brxe-rdffsg:hover .hover-card-button{\n  opacity:1\n}","_justifyContent":"space-between","_position":"relative"}},{"id":"ratork","name":"block","parent":"rdffsg","children":["rwnuvw","krpued"],"settings":{"_display":"grid","_gridTemplateColumns":"1fr 1fr","_height":"22","_position":"absolute","_top":"0","_zIndex":"1"}},{"id":"rwnuvw","name":"block","parent":"ratork","children":["uackeu"],"settings":{"_columnGap":"8","_rowGap":"8","_position":"relative","_zIndex":"99"},"label":"Left"},{"id":"uackeu","name":"block","parent":"rwnuvw","children":["otcvxi","jsiibi","fhiozg"],"settings":{"_columnGap":"0","_rowGap":"0","_position":"absolute","_zIndex":"99","_top":"0"},"label":"TAGS"},{"id":"otcvxi","name":"text-basic","parent":"uackeu","children":[],"settings":{"text":"SALE","_conditions":[[{"id":"oswiqt","key":"dynamic_data","dynamic_data":"{woo_product_sale_price}","compare":"empty_not"}]],"_typography":{"font-size":"14","line-height":"1","font-weight":"600"},"_background":{"color":{"hex":"#ffed00","id":"eablow","name":"Color #22"}},"_padding":{"top":"15","right":"20","bottom":"15","left":"20"}}},{"id":"jsiibi","name":"text-basic","parent":"uackeu","children":[],"settings":{"text":"NEW","_typography":{"font-size":"14","line-height":"1","font-weight":"600","color":{"hex":"#ffffff","id":"vqzrgu","name":"White"}},"_background":{"color":{"hex":"#000000","id":"djqfvy","name":"Color #19"}},"_padding":{"top":"15","right":"22","bottom":"15","left":"21"},"_attributes":[{"id":"ezyvdz","name":"data-date","value":"28.01.2025"},{"id":"upgmae","name":"data-post-id","value":"12662"}],"_cssClasses":"new-product-label"}},{"id":"fhiozg","name":"text-basic","parent":"uackeu","children":[],"settings":{"_padding":{"top":"4","right":"6","bottom":"4","left":"6"},"_typography":{"line-height":"1","font-size":"14","font-weight":"500","color":{"hex":"#616161","id":"efeada","name":"Color #4"}},"_background":{"color":{"hex":"#ffffff","id":"vqzrgu","name":"White"}},"text":"Nicht Vorrätig","_conditions":[[{"id":"acezvj","key":"dynamic_data","dynamic_data":"{woo_product_stock_status}","compare":"!=","value":"instock"}]]}},{"id":"krpued","name":"block","parent":"ratork","children":["pdebcc"],"settings":{"_padding":{"top":"10","right":"10"}},"label":"Right"},{"id":"pdebcc","name":"shortcode","parent":"krpued","children":[],"settings":{"shortcode":"[add_to_wishlist_button]","_typography":{"text-align":"right","font-size":"20"},"_conditions":[[{"id":"bjoall","key":"user_logged_in","compare":"==","value":"1"}]],"_cssCustom":"#brxe-pdebcc button{\n  background-color:transparent !important\n}\n\n#brxe-pdebcc .wishlist-message{\n  display:none\n}"},"themeStyles":[],"label":"Wishlist Heart"},{"id":"tiiuzj","name":"block","parent":"rdffsg","children":["hlwrul"],"settings":{"_overflow":"hidden","_position":"relative","_zIndex":"0"}},{"id":"hlwrul","name":"image","parent":"tiiuzj","children":[],"settings":{"image":{"useDynamicData":"","size":"large"},"_cssCustom":"#brxe-hlwrul img{\n  transition:0.3s;\n}\n\n\n#brxe-hlwrul:hover img{\n  scale:1.03\n}","link":"url","url":{"type":"meta","useDynamicData":"https://sinanisler.com/codex/woocommerce-loop-template-bricks-builder/","title":"WooCommerce Loop Template, Bricks Builder"},"_aspectRatio":"0.9","_overflow":"hidden","_width":"100%"},"themeStyles":[]},{"id":"elided","name":"block","parent":"rdffsg","children":["rtegts"],"settings":{}},{"id":"rtegts","name":"block","parent":"elided","children":["dvohwr","xbbpzi"],"settings":{"_display":"grid","_gridTemplateColumns":"1fr 80px","_gridGap":"20"}},{"id":"dvohwr","name":"block","parent":"rtegts","children":["qbbhhd","wdyfqu"],"settings":[]},{"id":"qbbhhd","name":"text-basic","parent":"dvohwr","children":[],"settings":{"text":"WooCommerce Loop Template, Bricks Builder","_typography":{"font-size":"14","font-weight":"600"},"link":{"type":"meta","useDynamicData":"https://sinanisler.com/codex/woocommerce-loop-template-bricks-builder/"}}},{"id":"wdyfqu","name":"div","parent":"dvohwr","children":["qsabji"],"settings":{"_display":"flex","_columnGap":"5","_rowGap":"5"}},{"id":"qsabji","name":"text-basic","parent":"wdyfqu","children":[],"settings":{"_typography":{"font-size":"12","color":{"hex":"#616161","id":"efeada","name":"Color #4"}},"tag":"div","text":"{post_terms_product_cat}"}},{"id":"xbbpzi","name":"block","parent":"rtegts","children":["wsarvv"],"settings":{"_alignItems":"flex-end"}},{"id":"wsarvv","name":"text-basic","parent":"xbbpzi","children":[],"settings":{"text":"{woo_product_price}","_typography":{"text-align":"right","font-weight":"600","font-size":"14"},"_cssCustom":"#brxe-wsarvv ins{\n  text-decoration:none !important;\n  background:var(--bricks-color-eablow);\n  padding:4px;\n}"}}],"source":"bricksCopiedElements","sourceUrl":"https://sinanisler.com","version":"1.12.1","globalClasses":[],"globalElements":[]}