Sold Out Icon hiding behind images

Webtechne, send me a email trough my contact form on https://gerhardpotgieter.com with details to access the site and a link to a sold out product and I will have a look for you.

Hey Gerhard
how are you?

Thanks for your reply.
Finally I solved the half of the problems.

1. Sold Out Icon hiding behind images in Single Product Page (Solved)
2. Sold Out Icon not showing on Products Page (working on it)

So, for the #1 issue, after trying everything here and a lot of other ideas I was checking the web (again) for another suggestion and I found a really good advice:
-continue to add “9s” until it works. ??

So, works for me with 6 “9s”:

.woocommerce span.soldout, .woocommerce-page span.soldout {
    z-index:999999;
}

For the number #2 I discovered that my “content-product.php” file has not the line with:

<?php do_action( 'woocommerce_before_shop_loop_item_title' ); ?>

The only similar code i found is:

<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>

Should I just add the “_title” to the existing line or I have to add a new line with the suggested line code?

Thanks in advance Gerhard

Really great support

Alvaro

Alvaro

Have a look at the content-product.php file located in the templates folder of the WooCommerce plugin to get an idea of there to add that hook. The extension needs that hook, and a lot of other extension will most probably also rely on that so it would be wise to perhaps contact your theme developers to look into this for you.

Hey Gerhard

I tried adding the new code.
Like this:

<div class="product-grid <?php echo $class; ?>">
    	<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>

    		<?php woocommerce_get_template( 'loop/sale-flash.php' ); ?>

    	<?php do_action( 'woocommerce_before_shop_loop_item_title' ); ?>
    		<?php
    			$placeholder_width = $woocommerce->get_image_size( 'shop_catalog_image_width' );
    			$placeholder_height = $woocommerce->get_image_size( 'shop_catalog_image_height' );
                $url = wp_get_attachment_image_src( get_post_thumbnail_id($product->ID), array(260,260) );
        		if ( has_post_thumbnail() ){
        			?>

It kind of works, but I got a duplicated product image. Duh!

Check the image:
https://oi61.tinypic.com/t0hkep.jpg

Is it the position of the code?
Do I need a new line to avoid the duplication?

Maybe I do need to contact the developers… just to hear that they can’t do nothing about 3rd party plugins.
But, I think also that I can bargain something with the translation of their theme… I already did it for myself. Sure I can share it with the rest and If I can get a little extra free support, better ??

Thanks again Gerhard

If I find a solution I will post it here.

Alvaro

Alvaro

I think they remove the <?php do_action( ‘woocommerce_before_shop_loop_item_title’ ); ?> part as that is used to load the product image as well and then they added the image manually beneath that. Perhaps try remove the image code in the template file as well and just rely on the woocommerce_before_shop_loop_item_title hook.

What their reasoning was behind this I do not know and that you will have to ask them.

Hi Gerhard

I think they removed it to get the “hover” effect of the template.

Check it here:

Blanco theme for Woocommerce:
https://8theme.com/demo/blanco-wo/

I already send an email to the developers. They are from https://8theme.com/

Hope they can offer me a solution.

Anynews I will post it here.

Thanks for all.

Take care

Alvaro

Hi Gerhard

I’m not really a person who sits and waits.
So, I continue to thinking about the solution the rest of the day…
Searching where the hecks would be the line of codes in the theme to make this works…

And suddenly I though:
Maybe would be easier to change the code of the plugin that find a new code for the theme.

And tadan!

So, in wsop/classes/class-wc-sold-out-products.php I changed some lines.

public function __construct( $file ) {
		$this->file = $file;
		add_action( 'plugins_loaded', array( $this, 'load_textdomain_files' ) );
		add_action( 'plugins_loaded', array( $this, 'unload_woocommerce_actions' ) );
		add_action( 'widgets_init', array( $this, 'register_widget' ) );
		add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_stylesheet' ) );
		add_shortcode( 'sold_out_products', array( $this, 'sold_out_products_shortcode' ) );
		add_action( 'woocommerce_before_single_product_summary', array( $this, 'single_sold_out_products_flash' ), 9 );
		add_action( 'woocommerce_before_shop_loop_item', array( $this, 'loop_sold_out_products_flash' ), 9 );
		add_filter( 'woocommerce_product_is_visible', array( $this, 'make_sold_out_products_visible' ), 10, 2 );
		add_action( 'woocommerce_before_shop_loop_item', array( $this, 'show_hide_loop_sale_flash' ), 10 );
	}

	function unload_woocommerce_actions() {
		remove_action( 'woocommerce_before_shop_loop_item', 'woocommerce_show_product_loop_sale_flash', 10 );
	}

In lines #31, #33 and #37 I changed the parameter:

‘woocommerce_before_shop_loop_item_title’

for this one:

‘woocommerce_before_shop_loop_item’

And now its working perfectly.

Also I did minor tweaks in templates/loop and templates/single-products
changing “Sold Out!” for the word in portuguese…

And the size of the circle in assets/css/style.css

Well, that’s it.

Thanks again for your patience and your nice plugin.

Take care

Alvaro

Thanks Alvaro! That worked a treat ??

Awesome, glad you could find a workaround.