Rename one ‘Responsive Product List Products’ and one ‘Responsive Product List Fragments’<\/p>\n\n\n\n
![\"\"](\"https:\/\/www.graphicz.co.uk\/blog\/wp-content\/uploads\/2020\/06\/image_7050-1.jpg\")
<\/a><\/figure>\n\n\n\nOpen each in turn, in the product one remove all the fragment stuff and in the fragment one remove all the product stuff: <\/p>\n\n\n\n In the Fragment one open ‘Click Here to Edit List Layout Settings’, Click Overal Design, change <div class=”product-list”> to <div class=”product-listx”> In Section Page Body, comment out ‘Product List’ The problem now is that you will get empty divs in the fragment list where products should be and empty divs in the product list where fragments should be! Add to stylesheet:<\/p>\n\n\n\n NB. This only works in the live site, you will see the empty divs in preview. Sellerdeck Swift is an excellent design template. One drawback is that the number of columns for product summaries is fixed, you can no longer specify it. This means that with four columns across of product summaries if you have a…<\/span> <\/p>\n <\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-543","post","type-post","status-publish","format-standard","hentry","category-graphicz-articles"],"_links":{"self":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts\/543"}],"collection":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=543"}],"version-history":[{"count":3,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts\/543\/revisions"}],"predecessor-version":[{"id":555,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/posts\/543\/revisions\/555"}],"wp:attachment":[{"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.graphicz.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/a><\/figure>\n\n\n\n
Click the ‘Edit Rows and Columns’ tab
Under No Of Items, Middle rows delete ‘dynamic’ and replace it with 1.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Add to stylesheet:<\/p>\n\n\n\n@media (min-width: 768px) {\n.product-listx > div, .product-listx > .product-details {\npadding-left: 15px !important;\npadding-right: 0 !important;\npadding-top: 15px;\nmargin-bottom: 30px;\nwidth:100%\n}\n.product-listx {\nwidth:100%\n}\n}<\/pre>\n\n\n\n
And add your two new layouts Fragment one first:<\/p>\n\n\n\n <!--<actinic:variable name=\"ProductList\" \/>-->\n<actinic:variable name=\"ProductList\" value=\"Responsive Product List Fragments\" \/>\n<actinic:variable name=\"ProductList\" value=\"Responsive Product List Products\" \/><\/pre>\n\n\n\n
<\/figure>\n\n\n\n
This is solved thus:
Add this above the two layouts in the Section Page Body:<\/p>\n\n\n\n<script>\n$(\"div.product-details\").filter(function(){\nreturn $(this).text().trim() == \"\"\n}).remove();\n<\/script><\/pre>\n\n\n\n.product-details:empty {\ndisplay: none!Important;\nwidth:0;\nmargin:0;\npadding:0;\nborder:0;\n}<\/pre>\n\n\n\n<\/figure>\n\n\n\n
See it here: https:\/\/www.graphicz.solutions\/onefr…log\/Rings.html<\/a>
The other thing to mention is that in Swift the Section Description now appears at the top of the section page which will sometimes remove the need for a separate fragment – maybe?<\/p>\n","protected":false},"excerpt":{"rendered":"