Column links Woocommerce Shop page

[SSE]

Hi!

Could you help me with turning columns to links, please?
I have customized my Woocommerce shop page creating first a page I wanted using Cornerstone, and then choosing that page to the Shop page from Woocommerce settings. I also created a new empty archive-product.php to my child theme and added a code snippet to hide product loop from the Shop page.

On my Shop page I’d like to turn columns to links to certain pages. I managed to do that with this info you have provided: https://theme.co/apex/forum/t/column-link/42902/2. My problem is that when the page is selected as Shop page, column links stop working. Why is that and is there any way to fix that? Or could you tell me some alternative way to achieve same layout in other way?

Thank you very much!

[thai]

Hi There,

Just like the blog and archive pages you can not edit the shop page in any content builder. Because it is using a special template.

If you want your shop page to be editable in Cornerstone, please do not set it as Shop page in Woocomerce > Settings > Display. Then use the Woocommerce shortcodes for displaying your products. You can paste your shortcodes into a RAW Content element.

Hope it helps!

[SSE]

Hi Thai,

Actually I did edit shop page in Cornerstone (the way I descriped, before selecting the shop page) and everything else except the column links work fine. Normal links work too, I tested.
Could you please check that page and tell me is there some better option to accomplish same looking/working links? I mean neat line of pictures with text, and pictures “fading” when hovered.

Thanks!

[ruenel]

Hello There,

You column links did not work because there is no custom JS script associated with the column classes that will trigger the links. You will have to add the custom JS first before it will work.

If you already have the custom JS code, please post it in your next reply so that we can take a closer look at it and inspect your code whether it is valid or has some errors in it.

Please let us know how it goes.

[SSE]

Hi,
I have added custom JS, but it seems to disappear when the page is selected as woocommerce shop page.
For example I have this class added to one column: column_link_to_sisustus and
this code:
jQuery ( document ).on(‘click’, ‘.column_link_to_sisustus’, function() {
window.location = ‘https://sirkolke.com/shop/suomalainen-sisustus/’;
} );

added in content JS.

It should be correct, because links work when the page is not selected as woocommerce shop page. Now it is not, you can look how links work fine.

Thank you for looking into this!

[rad]

Hi @SSE ,

The issue here is the shop page, assigning your custom shop page to be your main Woocommerce shop page means, Woocommerce overtakes and override what’s in the custom shop page. Hence, any added code will not work. It’s only normal, you may also contact a Woocommerce developer to see if there is a way to use a custom shop page as a main shop page without setting it as Woocommerce shop page.

Thanks!

[SSE]

Ok, thank you!

Then I have an additional question. How can I make layout similar to that I have in the page I mentioned? Images with text on them and whole thing as a link. And all of them beautifully in line. Like this:

Thanks!

[Prasant]

Hello @SSE,

Thanks for updating the thread.

You can take a look at Essential Grid plugin that can be installed from X > Validation > Extensions to create a layout similar to the screenshot you have shared.

Here’s some resources that you can take a look at get started.

https://essential.themepunch.com/demo-more-examples/

Essential Grid | Themeco Docs

Thanks.

[SSE]

Thank you very much!

[basanta]

You are most welcome!