Understanding Woocommerce and Stacks

Hi gang,
I’m trying to customize a Woocommerce product catalog in Pro Theme. If I understand it correctly, each item is a special post type.

The client would like a custom Sold Out banner across relevant item images. Several extensions do this, but behave peculiarly with stacks. The badge image will cover the title area and not the thumbnail. However, it is visible on the full product image!

I’ve included photos to help you understand what I mean. Do you have any suggestions?

Chad

Also, could someone please tell me how to remove space between custom header and content? I’ve tried several CSS codes and none work.

Hi There,

Thanks for writing in!

The feature you are looking for unfortunately doesn’t offer by Pro and this is something out of our theme support scope. If you can add the plugin that you are using and send us the page URL so that we can suggest you the css to place the image in right place. But we can’t give you a exact solution for a third party plugins.

To remove the spacing between the header and content please use this css and let us know if this helps.

.hentry .entry-wrap {
   padding: 0px !important;
}

Thanks

Thanks. The website is in a secure note. The active plugin is Woocommerce Soldout Badges - by Gema75.

Oh, and that CSS didn’t work. :frowning:

Hi again,

  • I tested the code and it work fine, please try adding the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

  • I chekced your product images and couldn’t find the sold out banner on any of your images. Can you please enable the feature and we can look into the possible solutions to fix it for you.

Thanks!

  • I added that code to Additional CSS via the Customizer. It worked, thanks!

  • That’s odd. I can see it on my desktop computer. Other devices (tablet, phone) don’t display it. The plugin has been enabled. Do you have any suggestions?

Hi there,

Would you please kindly get back to us with the exact URL of the page and a screenshot of the place you are talking about so that we can check that against our browser developer toolbar and give you proper suggestion?

I suggest that you add the code to Pro > Launch > Theme Options, you will need to work with that section as the Customizer is going to disabled soon:

I am not sure what you are talking about regarding the desktop and tablet. Is it about the header or the badge?

We will need more information to be able to help you around.

Thank you.

Sorry about the confusion. The header is fine now.

I am referring to the Sold Out badge. It’s not working properly on desktop resolution and doesn’t even show up on tablet and mobile devices. You should be able to partially see it on the main page. Please refer to the images I provided above.

Hello There,

To view the whole sold out image, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.woocommerce li.product .entry-wrap {
    overflow: visible;
}

Hope this helps.

I’m afraid that didn’t work. When you add !important, it moved it slightly.

Hi there,

Unfortunately, the given URL is no use to us as the website is under construction:

The reason that we asked for the URL is to check the sold out section you mentioned. We do not want the homepage URL the exact URL of the page that you have the badge in, also you need to give us a way to actually see the website and not the under construction page.

If we see the page in our browser we can use the developer toolbar of our browser to check the code and give you a correct CSS suggestion:

Thank you.

Sorry about that! That was a last minute request by the client. I’ve lifted the Under Construction page.
Here is a link to the badge itself.

Hi,

Your image url is returning 404 not found which means it doesn’t exist.

You need to upload it again and update badge url in your plugin.

Thanks

Try this one.

Hi Chad,

The image works now though I am not exactly sure what you would like to happen.

Can you provide us screenshot that indicates where exactly you want the image to appear in your home page and on single product page.

Thanks

Sure. It looks fine on the second photo I provided in my initial post. Please view this mock up of the front page.

Hi There,

Thank you for the mock up. When the product is out of stock, there’s a class .outofstock available. We can use that class to implement the image on top:

.home .outofstock {
    position: relative;
}
.home .outofstock:after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: url(http://www.saskgrass.com/wp-content/uploads/2018/02/out-of-stock-transparent-200-200.png) center;
    background-repeat: no-repeat;
}

See this: https://screencast-o-matic.com/watch/cFnr1qo915
Feel free to adjust as needed. Also note that further customization from here would be getting into custom development which is outside the scope of support. Thank you for understanding.

1 Like

I notice that thumbnails can no longer be clicked on either.
(It doesn’t take you to product)

Hey @chadfahlman,

I’m not sure where that is coming from but it is not a part of X and neither caused by @Lely’s code . Please disable plugins and customizations to check where that is coming from.

This is because you covered the clickable area with the sold out image. Your only option for this would be to minimize the size of your image like this.

Update the code given previously to this.

.outofstock:after {
    position: absolute;
    content: "";
    top: auto;
    bottom: 56px;
    right: 10px;
    left: auto;
    background: url(http://www.saskgrass.com/wp-content/uploads/2018/02/out-of-stock-transparent-200-200.png) center;
    background-repeat: no-repeat;
    background-size: 100px;
    width: 100px;
    height: 100px;
}

I looked closer at the highlighted element. That IS the sold out badge plugin.
It’s looking like no plugin is compatible with this theme. I will speak with the client about an alternative.