The Grid and WooCommerce - strange css behaviour?

[TrendRaider]

Hey,

I’ve managed to override WooCommerce categories and tag archives to use The Grid for this pages with the following code:

<?php

// =============================================================================
// VIEWS/ETHOS/WOOCOMMERCE.PHP
// -----------------------------------------------------------------------------
// WooCommerce page output for Ethos.
// =============================================================================

get_header();

?>


 <div class="x-container max width main">
<div class="offset cf">
  <div class="<?php x_main_content_class(); ?>" role="main">

    <?php if ( x_is_product() ) : ?>
      <?php x_ethos_entry_top_navigation(); ?>
    	<?php woocommerce_content(); ?>
    	  <?php elseif ( is_shop() ) : ?>
      <?php The_Grid('Produkte: ThemenBoxen', true); ?>
    <?php elseif ( is_product_category() ) : ?>
      <?php The_Grid('Produkte: ThemenBoxen', true); ?>
    <?php elseif ( is_product_tag() ) : ?>
      <?php The_Grid('Produkte: ThemenBoxen', true); ?>
    <?php else : ?>
    <?php woocommerce_content(); ?>
    <?php endif; ?>

  </div>

  <?php get_sidebar(); ?>

</div>
  </div>

<?php get_footer(); ?>

Working perfect, see here BUT why is the “For sale” (“Angebot” in German) field so big? You can see here what it should to look like (both pages using same The Grid).
I know it’s custom development but I’ve come such a long good way for myself and stuck now on this issue. Any hint for me? There must be something on the archives that is conflicting with the css of the Grid?

[lely]

Hi Alex,

Yes it is custom development. I tried to check your site to see the difference though but I cannot access it. It was asking htaccess credentials. Please provide it in a screenshot so might give you inside but unfortunately, we cannot fixed it for you. Thank you for understanding.

[TrendRaider]

Hi, ah yes sorry, I forgot to post the secure note. Thanks!!

[christian]

Hey Alex,

What’s causing this is our theme’s onsale CSS for the WooCommerce Product Listing. I’d just clarify that this is not a bug but this just a conflict with your particular setup which we can’t provide support for.

What I could do is just provide some guidance and that is try changing the position to static and the display to inline like the following code. Add it in Theme Options > CSS.

.woocommerce .onsale {
    position: static;
    display: inline;
}

Please just note that I’m not taking into account other things like the default WooCommerce Product Listing. If that code causes issues in your site, please consult with a third-party developer to fix this customization issue.

Hope that helps and thank you for understanding.

[TrendRaider]

@christian your support is truly amazing! I do know that it was beyond scope but you helped me just perfect. Your css did the trick! Thank you so much!

[ruenel]

You’re welcome Alex!
We’re glad @Christian’s solution works out for you.