add single product to bottom of all category views.

Hi @megunticook ,

Any ideas on how I can neatly add this product to the list of products shown on category pages neatly, without having it start a new row?

This will require custom styling of the component. All themes are different so I can’t promise this can be done without major modifications (which will require help from theme developer or a dedicated developer), but can you send me the URL of one such page? If it’s something that can be done without a lot of complexity, then I’ll write up a quick styling code for you.

Thanks…here’s one category view I was referring to: https://swansislandcompany.com/product-category/home-goods/blankets/

I’m using the flatsome theme.

Wonder if there’s a way to write a little PHP function that would tack that product on at the end?

Hi @megunticook ,

I see you had mentioned

Was able to accomplish this by using shortcode in the “Bottom Content” field of the category page. But this puts the single product on a new line, which looks a little odd.

But I do not see the single product (in new line) on the category page link you sent. Can you add the shortcode back so that the single product appears on the page, and then I’ll see if I can add some quick CSS styling to it?

Let me know.

Sorry, I’m going my experimenting on my development site, which is password protected, but the link is to the production site.

If you want to see the dev site, go to https://dev.swansislandcompany.com/product-category/home-goods/blankets/ and log in with user “lucas” and pw “98im$!k;pPM”

Thanks.

Hi @megunticook ,

Thank you for sending the details of the dev site.

I checked this page: https://dev.swansislandcompany.com/product-category/home-goods/blankets/
And even on the dev site, I do not see the single product added with the shortcode. Here’s how it looks on my end: https://d.pr/i/UnSzES

To be able to experiment with the CSS, I’d need the single product present on the category page already so I can apply some CSS using browser console. I see you had mentioned that you had previously added the single product using shortcode in the Bottom Content field – can you please add the product shortcode again and let me know?

Fixed: https://dev.swansislandcompany.com/product-category/home-goods/blankets/.

Thank you.

Hi @megunticook ,

Thank you for adding the product.

I believe you’re referencing to this product: https://d.pr/i/JcjUCb

I checked and the product here is in it’s own separate HTML div element, so it was not possible to add it beside the other product using CSS – this would require you to customize the PHP template of the category archive pages to add the product right beside other category products.

A workaround for this would be to add the products in categories in multiple of three (As in each category should have either 3, 6, 9, 12, 15 and so on products). And then use CSS to hide the separator line which appears on top of this single product, with this approach the page would look seamless like this: https://d.pr/i/2Dfj28

If this workaround would work for you, then you can add the following CSS to hide the separator line:

.archive hr {
    display: none;
}

I hope this helps!

Hey there – looks like you’re all set on this. I’m setting this topic to ‘resolved’ but do feel free to open a new one if you need more help.