X theme is not allowing Woocommerce shop to display correctly

All the Woocommerce tutorials and shops I look at online have the title, price and “add to cart” occuring BELOW the thumbnail, however in my Woocommerce shop just installed in X theme website www.leannacinquanta.com/shop, everything is jammed onto the thumbnail. Woocommerce support says: “The display of the products with the theme title and add to cart buttons showing up as an overlay is determined by the theme. So it would be best to contact the theme authors to see if there is any way to adjust that.”

Please guide me how to get X to display a normal Woocommerce shop with the product title, price and add to cart BELOW the thumbnail.

Hi Leanna,

It’s standard Ethos Stack Shop Design as you can see in our demo.

http://demo.theme.co/shop-ethos/

Though if you the title to appear below th image, you can add the code below in Theme Options > CSS

.woocommerce li.product .entry-header .price>.amount,
.woocommerce li.product .entry-header h3 a {
    color: #000;
}

.woocommerce li.product .entry-wrap {
    position: static;
}

.woocommerce li.product .entry-wrap:before {
   display:none;
}

Hope that helps.

2 Likes

Thank you that fixed it! Great job!!!

Glad to hear that. :slight_smile:

Related question: i’m using [product id=“7467”] to place a single product on my home page and I want to hide the thumbnail image. Any way to do that for just this one specific occurrence of this item? I want the thumbnail to still show on the “shop” page, main item page, etc.
thanks
Leanna

Hi there,

That’s possible, please add this CSS too

.home .products .post-7467 .entry-featured {
     display: none;   
    }

Cheers!

Thank you worked great!
I think I understand that this hides the image only on the home page due to .home… so if I also want to feature this same product on https://leannacinquanta.com/book-treasures-in-dark-places then I would use:

.book-treasures-in-dark-places .products .post-7467 .entry-featured {
display: none;
}

but it didn’t work, ie on that page the thumbnail is not hidden.
Also the item refuses to obey centering code. It wants to stick to the left side. I can force it toward the center with left padding but that’s not optimal…

Hey Leanna,

The correct selector or CSS would be this.

.page-id-7559 .woocommerce li.product .entry-featured {
    display: none;
}

The home class is unique to the home or front-page. The rest of the pages will use page-id- followed by their post ID. Here’s how to located the post ID.

It does not obey the centering code because the product display is floated left. To center, please add this CSS to your page.

.page .woocommerce li.product {
    float: none;
    margin: auto;
    width: 290px;
}

Hope that helps.

1 Like

THANK YOU!
Sorry to keep finding things to tweak… but when the ustomer clicks the indiviual item on the home page, no notice pops up saying it has been added to the cart. When I asked Woocommerce they again said it’s an issue with the theme:
_"By default a notification message is shown when you add anything to cart, including using a shortcode. For example: _
Link to image: http://joelwills.com/fFJIto
The only time it doesn’t is if you have redirect to cart turned on and then of course you can see it has been added to your cart as you’re on the cart page. So again it looks like your theme is overriding the default display as WooCommerce does show this message unless it is changed."

Also, no shipping is calculating. I’ve set shipping method, dimensions etc for the product and selected “flat rate” but when I move through as if to purchase, no shipping is added to the base item cost… if this isn’t s theme issue let me know and I’ll take it up with Woo. Truly appreciate your help!

Hi There,

The notice is there but it is in different styling (different from your screenshot). This is the notice when you add the item from the individual product page.


While a red big circle is the confirmation when you add a product from the shop page.


X Theme only overwrites the styling but not functionality.

Regarding the Shipping Calculator, please contact the WooCommerce support, they can help you better on this matter.

How To Set Up Shipping Classes in WooCommerce

Cheers!

Shipping calculator got fixed.
As for the notice that an item has been added to cart, for “Shop” page and for “Individual Product” it is as you stated above. However when I have added a specific product to the Home page using the item shortcode, if user adds to cart from there, no notice is given. Any way to fix that? For example plz see www.leannacinquanta.com scroll down to the book…

Hi there,

The javascript and HTML codes responsible for that notification aren’t integrated to the products that are manually added. It’s only integrated on shop page and archive pages.

<div class="x-cart-notification"><div class="x-cart-notification-icon loading"><i class="x-icon-cart-arrow-down" data-x-icon="" aria-hidden="true"></i></div><div class="x-cart-notification-icon added"><i class="x-icon-check" data-x-icon="" aria-hidden="true"></i></div></div>

jQuery(document).ready(function($) {

  //
  // Notifications.
  //

  var $notification = $('.x-cart-notification');

  if ( $notification.length > 0 ) {

    $('.add_to_cart_button.product_type_simple').on('click', function(e) {
      $notification.addClass('bring-forward appear loading');
    });

    $('body').on('added_to_cart', function(e, fragments, cart_hash) {
      setTimeout(function() {
        $notification.removeClass('loading').addClass('added');
        setTimeout(function() {
          $notification.removeClass('appear');
          setTimeout(function() {
            $notification.removeClass('added bring-forward');
          }, 650);
        }, 1000);
      }, 650);
    });

  }

} );

So please add this code in a text element under your home page product.

Thanks!

hmmm… the code works great as long as it is visible but when I add class x-hide-xs x-hide-sm x-hide-md x-hide-lg x-hide-xl to hide it from view, it no longer works.

Hi there,

I’m not sure what you mean, it’s supposed to be visible. And I’m not sure why you’re adding those classes. Would you mind providing more information? Adding those classes will, of course, hide them in mobile which will make that code appear not working.

Thanks!

The code itself shouldn’t be visible to visitors on the page, only the output of the code, ie the nice circle checkbox image that appers after clicking “add to cart”. There’s got to be a way to have the code work in the background but it not actually appear to the viewer. Here’s what the home page looks like if I don’t hide the code: Of course, this is unacceptable…

Hello There,

Please remove the code in your text element so that it will not display the code to the visitors of the page. To resolve your issue, please follow this method instead (https://theme.co/apex/forum/t/cover-me-in-ajax/24422/2?u=ruenel):
https://theme.co/apex/forum/t/cover-me-in-ajax/24422/2?u=ruenel

Please let us know how it goes.

1 Like

THANK YOU it works great!

You’re welcome!
We’re glad we were able to help you out.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.