WooCommerce Shop page thumbnail wrap - wordpress

I am looking at this: https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/
I would like to wrap thumb in shop page into another div.
If I use following code I could achieve something, but the problem is many themes remove or dont use woocommerce_before_shop_loop_item_title and use some different code and I cannot effectively do my action.
remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'my_woocommerce_before_shop_loop_item_title', 10 );
function my_woocommerce_before_shop_loop_item_title() {
global $product;
$post_id = $product->get_id();
$html = woocommerce_get_product_thumbnail('woocommerce_thumbnail');
echo '<div class="my">' . $html . '</div>';
}
Is there action or hook that processes product thumbnail to which I could do my own action? Regardless of what is happening before and after that?

Please try to implement in this way.
//replace the functionprefix with your functions prefix
function functionprefix_wrap_loop_product_image() {
if ( ! class_exists( 'WooCommerce' ) ) return; //* exit if WooCommerce not active
add_action( 'woocommerce_before_shop_loop_item_title' , 'functionprefix_product_loop_image_wrapper_open', 10 );
add_action( 'woocommerce_shop_loop_item_title' , 'functionprefix_product_loop_image_wrapper_close', 10 );
}
add_action( 'woocommerce_before_shop_loop' , 'functionprefix_wrap_loop_product_image', 3 );
//replace the functionprefix with your functions prefix
function functionprefix_product_loop_image_wrapper_open() {
echo '<div class="image-wraper">';
}
function functionprefix_product_loop_image_wrapper_close() {
echo '</div>';
}

Related

Woocommerce: add 'Free Delivery' badge to product thumbnail in Woocommerce based on shipping class

i want add, on product listing, over image a text badge "Free delivery" based on specific shipping class "spedizione-gratuita".
You can help me ?
I test this code but dont work
add_action( 'woocommerce_before_shop_loop_item_title', 'single_product_label', 10 );
function single_product_label() {
global $product;
$shipping_classes = 'spedizione-gratuita';
if ( $product->get_shipping_class() ) {
echo '<div class="spedizione-gratuita"><span class="freedel">SPEDIZIONE GRATUITA</span></div>';
}
}
Tnks
I believe this will achieve what you are trying to do. You almost had it, but the $product global has no value in the shop loop you need to use $post instead
add_action( 'woocommerce_before_shop_loop_item_title', 'single_product_label', 10 );
function single_product_label() {
global $post;
$_product = wc_get_product( $post->ID );
$shipping_classes = 'spedizione-gratuita';
if ( $shipping_classes == $_product->get_shipping_class() ) {
echo '<div class="spedizione-gratuita"><span class="freedel">SPEDIZIONE GRATUITA</span></div>';
}
}

Remove product title when product is "out of stock" on WooCommerce shop and archives pages

I am running an art gallery website using WooCommerce and the owner does not want to show the product name/title if the product has been sold/out of stock.
I have got this far with putting together a function, but it doesn't work. I wondered if anyone could give me any tips?
// Hides title on Sold products
add_filter( 'woocommerce_shop_loop_item_title', 'remove_name', 10, 2 );
function remove_name ( $product ) {
if ( ! $product->is_in_stock()) {
$title = '';
}
return $title;
}
Your code contains some errors and mistakes:
woocommerce_shop_loop_item_title is NOT an filter but an action hook
No arguments are passed to this hook , while your code says there would be 2
$product is undefined, use global $product;
Note: I've added a line with debug information, it can be removed
So you get:
function action_woocommerce_shop_loop_item_title() {
global $product;
// Is a WC product
if ( is_a( $product, 'WC_Product' ) ) {
// Should be removed but may be useful towards debugging
echo '<p style="color: red; font-size: 20px;">DEBUG information: ' . $product->get_stock_status() . '</p>';
// NOT in stock
if ( ! $product->is_in_stock() ) {
// Removes a function from a specified action hook.
remove_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
}
}
}
add_action( 'woocommerce_shop_loop_item_title', 'action_woocommerce_shop_loop_item_title', 9 );
Please try to use this hook to remove product title. Use this inside the condition to check if product is in stock:
remove_action( 'woocommerce_shop_loop_item_title','woocommerce_template_loop_product_title', 10 );
This does what you want but still allows access to the product page.
add_action( 'woocommerce_shop_loop_item_title', function() {
global $product;
if ( ! $product->is_in_stock()) {
remove_action( 'woocommerce_shop_loop_item_title','woocommerce_template_loop_product_title', 10 );
}
}, 5 );
add_action( 'woocommerce_single_product_summary', function() {
global $product;
if ( ! $product->is_in_stock()) {
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);
}
}, 1);

how to change woocommerce shop page details?

I've used a snippet to display the weight of jewellery in shop page of woocommerce. I've inserted the snippet in function.php file. But its displaying the weight below add to cart button. It must be displayed above the button.
here is the snippet
add_action( 'woocommerce_after_shop_loop_item', 'bbloomer_show_product_dimensions_loop', 20 );
function bbloomer_show_product_dimensions_loop() {
global $product;
$dimensions = $product->get_dimensions();
if ( ! empty( $dimensions ) ) {
echo '<div class="dimensions">';
echo '<br><b>Weight:</b> ' . $product->get_weight() . get_option( 'woocommerce_weight_unit' );
echo '</div>';
}
}
the weight must be printed above the add to cart button, what i've to change here.
add_filter( 'woocommerce_loop_add_to_cart_link', 'bbloomer_show_product_dimensions_loop', 10, 2 );
function bbloomer_show_product_dimensions_loop( $html, $product ) {
$weight = '';
$dimensions = $product->get_dimensions();
if ( ! empty( $dimensions ) ) {
$weight .= '<div class="dimensions">';
$weight .= '<br><b>Weight:</b> ' . $product->get_weight() .
esc_html( get_option( 'woocommerce_weight_unit' ) );
$weight .= '</div>';
}
return $weight . $html;
}
You have to use the filter tag woocommerce_loop_add_to_cart_link and prepend your weight component HTML like this. Since it's filter hook no need to echo the output just return the output HTML the tag woocommerce_loop_add_to_cart_link will handle that.
Based on my own blog tutorial: How To Add Quantity Input In Shop Page
Visit source code if you want to learn how this filter woocommerce_loop_add_to_cart_link works internally.
You can take the help of flex css for example:
.itemxyz{display: flex;flex-direction: column;}
.itemxyz .desc{order: 1;}
.itemxyz .price{order: 2;}
.itemxyz .btn{ order: 4;}
.itemxyz .weight{ order: 3;}

How can I get the product url?

I am adding an extra button on single product page. I would like to get the button url from the product.
I already have the following code
add_action( 'woocommerce_single_product_summary', 'my_extra_button_on_product_page', 30 );
function my_extra_button_on_product_page() {
global $product;
echo 'Extra Button';
}
what will be the editing to get href from the product on single product page?
What you are looking for is the following get_permalink( $product->get_id() );
https://businessbloomer.com/woocommerce-easily-get-product-info-title-sku-desc-product-object/
then you get
function my_extra_button_on_product_page() {
global $product;
// Get product id
$product_id = $product->get_id();
// Get url
$url = get_permalink( $product_id );
echo 'Extra Button';
}
add_action( 'woocommerce_single_product_summary', 'my_extra_button_on_product_page', 30 );

WooCommerce product short descriptions on a Wordpress page

I use WooCommerce shortcode to show some products on the front page.
Like this [products limit="3" category="my-category" ids="86, 71, 54"].
The front page is a regular WordPress static page. The problem is that it doesn't show product short descriptions. If I use the code below but for is_front_page(), it shows short description of a regular WordPress post (not of the listed products).
function custom_short_description() {
if ( is_product_category() ) {
echo '<div class="custom-short-description">' . get_the_excerpt() . '</div>';
} }
add_action( 'woocommerce_after_shop_loop_item_title', 'custom_short_description', 45 );
Adding to the function
global $post;
$product = get_product($loop->post);
and using
$product->post->post_excerpt;
didn't help.
Any ideas how to show product short descriptions?
===================
Update
===================
If you create custom loops, you might want to create variables at the beginning of the loop and then use them:
$product = wc_get_product( $loop->post->ID );
$product_short_description = $product->get_short_description();
$product_url = $product->add_to_cart_url();
add_action( 'woocommerce_after_shop_loop_item_title', 'custom_short_description', 45 );
function custom_short_description() {
if (is_front_page()) {
global $product;
echo '<div class="custom-short-description">' . $product->get_short_description() . '</div>';
}
}
This should get you the outcome you're looking for.
Tried and tested WordPress 5.1.

Resources