Shop page photos have shrunk on laptop screen - urgent

[iamwithU]

Hello,
I just updated Theme Pro, as well as the Woocommerce. Now my shop page is no longer looking like before. On the phone screen, it still looks alright. But for the laptop screen, the photos of my products used to be bigger - falling under the 5 categories (columns) and filling up the whole page. Now the photos have shrunk, leaving too much blank space in between the 5 columns.

Can you kindly assist?

[jade]

Hi there,

Please go to X > Theme Options > Woocommerce : Shop > Shop Columns then set it to 1.

Please make sure to clear your cache after making the changes.

Hope this helps

[iamwithU]

Thanks Jade, for coming so quickly to my rescue. Appreciate it.
As advised, I tried changing to one column. But now the page has only 4 columns, with the last column (“Savouries”) being brought down under the 4th column.

In the past, I had 5 equal columns - for the 5 categories of food. And the photos were evenly spread out to fill out the whole page.

Do you know what caused the change and made my photos shrink?
Look forward to your help.

[iamwithU]

In the past, on the phone screen, the shop page (“Our Menu”) appears as one column - in the portrait mode. And then when I turned the phone to the landscape mode, all the columns cascaded and opened up nicely - just like the laptop screen i.e. with all 5 columns.

Now that I switched to “one” column as advised by you, the phone landscape shows only one column - resulting in each photo stretching to fill the whole screen, thereby looking bloated and distorted.

Hence, perhaps the solution is not to switch to “one” column?

By the way, this is not the first time this phenomenon has happened. Your colleagues have helped me rectify this before. Pardon me, I just can’t remember what was the solution

[rad]

Hi @iamwithU,

It’s a visual composer related too, the integration was turned off in WPBakery Page Builder > General Settings > Legacy X Integration. I went ahead and turned it on and it now has 5 columns again. And please try setting back the columns you changed just for testing.

Thanks!

[iamwithU]

You’re a genius, Rad! It worked beautifully now!

Just help me understand so I learn from this - how did WPBakery come into play here? I did not use that theme or plugin…

And this is not the first time such a phenomenon has happened. And in the past, I don’t recall WPBakery being the solution. I searched through my past posts, but can’t find the one about the same issue.

Appreciate you guys supporting us through the Christmas season. Blessings to you, Rad

[rad]

Hi @iamwithU,

The content is created in WPBakery (which was Visual Composer), perhaps it’s created by someone? But glad it’s working now.

Cheers and Merry Christmas!

[iamwithU]

I see. You’re brilliant to be able to detect the WPBakery somehow! I’d never have known.

May I ask you a quick question for the same Shop page? As you can see, for the laptop screen, there is no logo there on top. For the other pages, there’s always the left sidebar with the logo - this allows the user to go back to the Homepage.

But as i need 5 columns on the Shop page, the left sidebar is gone, resulting in no logo. How do i insert a “back to homepage” or menu button on top to make it convenient for my visitors?

There’s no problem for the phone screen, as the logo and hamburger button are still on top of the Shop page.

[jade]

Hi there,

Please find and remove this block of code in Pro > Theme Options > CSS.

@media ( min-width: 980px ) {
.archive .x-navbar {
    display: none;
}
}

Then add this code at the bottom of the Global CSS area:

@media (min-width: 980px) {

    .post-type-archive-product .x-navbar-fixed-top,
    .post-type-archive-product .x-navbar-fixed-left {
        position: relative;
    }

    .post-type-archive-product .x-nav-wrap.desktop {
        display: none;
    }

    .post-type-archive-product .x-navbar {
        width: auto;
    }

    .post-type-archive-product .x-navbar .x-navbar-inner > .x-container.width {
        width: 90%;
    }

    .post-type-archive-product .x-navbar-fixed-left .x-brand {
        margin-top: 0;
        float: left;
    }

    .post-type-archive-product .masthead-inline .x-btn-navbar {
        display: inline-block;
        float: right;
        position: relative;
        top: -20px;
    }

    .post-type-archive-product .x-nav-wrap.mobile.collapse.in,
    .post-type-archive-product .x-nav-wrap.mobile {
        display: block !important;
    }

    .post-type-archive-product .x-nav-wrap.mobile.collapse,
    .post-type-archive-product .x-nav-wrap.mobile.x-collapsed {
        display: none !important;
    }

}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates.

Hope this helps.