[Resolved] Masonry display not working

[Author]

Posts

[glennN]

Hi there, I was looking into making some changes on the URL below and without changing any code or pages the shop front stopped displaying in Masonry.

hidden link

The documentation I tried to follow was from 2018 and didn't work, unfortunately.

I have attached a screenshot of how the page was displaying before.

Thank you,
Travis

New threads created by Waqar and linked to this one are listed below:

https://toolset.com/forums/topic/split-displaying-sold-text-for-out-of-stock-products/

[Waqar]

Hi Travis,

Thank you for contacting us and I'd be happy to assist.

To troubleshoot this, I'll need to see how this view is set up in the admin area.

Can you please share temporary admin login details, in reply to this message?

Note: Your next reply will be private and it is recommended to make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar]

Thank you for sharing these details.

During troubleshooting on the staging website, I noticed that the view "Shop" is using the content template "Shop Display by Category", to show the loop items.

That content template was set to be edited using the Beaver page builder and whenever the content in that template is saved using that page builder, it adds some additional HTML in the content which results in the layout issue that you're seeing on the live website too.

To fix this, you can stop using page builder for this template and use the standard classic editor.
( screenshot: hidden link )

The template contains some HTML content, so by switching to the classic editor, you won't be missing out on any functionality from the page builder anyway.

After switching to the classic editor, you can add this HTML content to the template:

<div class="item [wpv-post-class]">
    <a class="productimagelink" href="[wpv-post-url]">[wpv-post-featured-image size="medium"]</a>
    <div class="product-box">
        <table>
            <tbody>
                <tr>
                    <td class="product-title">
                        <h2><a href="[wpv-post-url]">[wpv-post-title]</a></h2>
                        <span class="product-sku">[wpv-post-field name="_sku"]</span>
                    </td>
                    <td class="product-price">
                        [wpv-woo-product-price]
                    </td>
                </tr>
            </tbody>
        </table>
        [wpv-conditional if="( $(wpcf-artwork-sam-artist-name) ne '' )"]
            <span class="artist-name">[types field='artwork-sam-artist-name'][/types]</span>
        [/wpv-conditional]
        [wpv-conditional if="( $(wpcf-artwork-sam-artist-name) ne '' ) AND ( $(wpcf-artwork-sam-medium) ne '' )"] - [/wpv-conditional]
        [wpv-conditional if="( $(wpcf-artwork-sam-medium) ne '' )"]
            [types field='artwork-sam-medium'][/types]
        [/wpv-conditional]
        <table>
            <tbody>
                <tr>
                    <td>
                        [wpv-conditional if="( $(wpcf-artwork-sam-size) ne '' )"]
                            [types field='artwork-sam-size'][/types]
                        [/wpv-conditional]
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

I hope this helps and for the question about the "Sold" text, I'll follow up on its separate ticket, shortly.
( ref: https://toolset.com/forums/topic/split-displaying-sold-text-for-out-of-stock-products/ )

[glennN]

My issue is resolved now. Thank you!