Return to previous page

Customizing the labels on our product listings

This topic has 5 replies, 3 voices, and was last updated 5 months, 3 weeks ago ago by Andrew Mitchell

Alpha111

Participant

June 2, 2024 at 04:22

I hope this message finds you well. I am reaching out to request some assistance with customizing the labels on our product listings.

Sale Label Adjustment: Currently, the sale label displays the percentage discount. I would like this to be changed to show the amount saved instead.

Label Display Format: I have attached a screenshot showing the desired layout for the labels. I would like the labels to be displayed exactly as shown in the screenshot.

Product Brand Label: Additionally, if possible, I would like to add a label that displays the product brand on each product listing.

Thank you in advance for your assistance

#397714 Copied Theme version: 9.3.11

4 Answers

Luca Rossi

Support staff

June 2, 2024 at 13:32

Hi @Alpha111,

Sale Label Adjustment: Currently, the sale label displays the percentage discount. I would like this to be changed to show the amount saved instead.

Please add the following code under functions.php file locates in your child theme:


function etheme_sale_label_percentage_text( $product_object, $sale_text, $is_single_product = false ) {
	$element_options = array();
	if ( ! $product_object->is_on_sale() ) {
		return $sale_text;
	}
	$element_options['sale_label_text'] = $sale_text;
	$sale_variables = $is_single_product || etheme_get_option( 'sale_percentage_variable', 0 );
	$product_type = $product_object->get_type();
	if ( $product_type == 'variable' ) {
//			$element_options['sale_label_text'] = $sale_text;
		if ( $sale_variables ) {
			$element_options['variation_sale_prices'] = array();
			foreach ( $product_object->get_available_variations() as $key ) {
				if ( $key['display_regular_price'] == $key['display_price'] ) {
					continue;
				}
				$element_options['variation_sale_prices'][] = (float) round( ( ( $key['display_regular_price'] - $key['display_price'] ) / $key['display_regular_price'] ) * 100 );
			}
			if ( count($element_options['variation_sale_prices']) )
				$element_options['sale_label_text'] = sprintf( esc_html__( 'Up to %s', 'xstore' ), max( $element_options['variation_sale_prices'] ) . '%' );
//				    $element_options['sale_label_text'] = esc_html__( 'Up to', 'xstore' ) . ' ' . max( $element_options['variation_sale_prices'] ) . '%';
		}
	} elseif ( $product_type == 'grouped' ) {
		if ( $sale_variables ) {
			$element_options['grouped_sale_prices'] = array();
			foreach ( $product_object->get_children() as $key ) {
				$_product = wc_get_product( $key );
				if ( $_product->get_type() == 'variable' && $_product->is_on_sale() ) {
					foreach ( $_product->get_available_variations() as $key ) {
						if ( $key['display_regular_price'] == $key['display_price'] ) {
							continue;
						}
						$element_options['grouped_sale_prices'][] = (float) round( ( ( $key['display_regular_price'] - $key['display_price'] ) / $key['display_regular_price'] ) * 100 );
					}
				} else {
					if ( $_product->is_on_sale() ) {
						$regular_price = (float) $_product->get_regular_price();
						$sale_price    = (float) $_product->get_sale_price();
						if ( $regular_price == $sale_price ) {
							continue;
						}
						$element_options['grouped_sale_prices'][] = (float) round( ( ( $regular_price - $sale_price ) / $regular_price ) * 100 );
					}
				}
			}
//				$element_options['sale_label_text'] = esc_html__( 'Up to', 'xstore' ) . ' ' . max( $element_options['grouped_sale_prices'] ) . '%';
			$element_options['sale_label_text'] = sprintf( esc_html__( 'Up to %s', 'xstore' ), max( $element_options['grouped_sale_prices'] ) . '%' );
		}
//			else {
//				$element_options['sale_label_text'] = $sale_text;
//			}
	} else {
		if ( apply_filters( 'etheme_sale_label_percentage', etheme_get_option( 'sale_percentage', 0 ) ) ){
			if ( $product_type == 'bundle') {
				$element_options['regular_price']   = (float) $product_object->min_raw_regular_price;
				$element_options['sale_price']   = (float) $product_object->min_raw_price;
			}
			else {
				$element_options['regular_price'] = (float) $product_object->get_regular_price();
				$element_options['sale_price']    = (float) $product_object->get_sale_price();
			}
			if ( $element_options['regular_price'] && $element_options['sale_price'] ) {
				$element_options['sale_label_text'] = sprintf( str_replace('{sales_text}', $element_options['sale_label_text'], __( '- %s', 'xstore' )),round( ( $element_options['regular_price'] - $element_options['sale_price'] ) ) . get_woocommerce_currency_symbol());
			}
		}
	}

	if ( class_exists( 'WAD_Discount' ) ) {
		$all_discounts = wad_get_active_discounts( true );
		$product_id    = $product_object->get_id();
		if ( in_array( $product_type, array( 'variation', 'variable' ) ) ) {
			$product_id = $product_object->get_available_variations();
		}
		foreach ( $all_discounts as $discount_type => $discounts ) {
			foreach ( $discounts as $discount_id ) {
				$discount_obj = new WAD_Discount( $discount_id );
				if ( $discount_obj->is_applicable( $product_id ) ) {
					$settings                           = $discount_obj->settings;
//						$element_options['sale_label_text'] = $sale_text . ' ' . $settings['percentage-or-fixed-amount'] . '%';
					$element_options['sale_label_text'] = sprintf( esc_html__( 'Sale %s', 'xstore' ),$settings['percentage-or-fixed-amount'] . '%' );
				}
			}
		}
	}

	return $element_options['sale_label_text'];
}

Label Display Format: I have attached a screenshot showing the desired layout for the labels. I would like the labels to be displayed exactly as shown in the screenshot.

We’re still not clear on this point. Could you please explain more?

Product Brand Label: Additionally, if possible, I would like to add a label that displays the product brand on each product listing.

Please enable these settings of Brands under XStore > Theme Options > WooCommerce(Shop) > Shope Elements.

https://prnt.sc/mZrEWkIeZhnm

Hope it helps!

#397773 Copied

Alpha111

Participant

June 2, 2024 at 17:12

1) is there a way to reduce the code lenght – i want space between ammount and symbole like this -500 MAD not -500MAD
2) i shared a screenshot how i want the label to be displayed like a rubon or block in some color and the price saved in white not like now with borders
3)product brand seems it doesnt work check screenshot to see the desired look i want

#397792 Copied

Luca Rossi

Support staff

June 3, 2024 at 05:10

Hi @Alpha111,

1.
– Please find this code:


$element_options['sale_label_text'] = sprintf( str_replace('{sales_text}', $element_options['sale_label_text'], __( '- %s', 'xstore' )),round( ( $element_options['regular_price'] - $element_options['sale_price'] ) ) . get_woocommerce_currency_symbol());

– And change to this:


$element_options['sale_label_text'] = sprintf( str_replace('{sales_text}', $element_options['sale_label_text'], __( '- %s', 'xstore' )),round( ( $element_options['regular_price'] - $element_options['sale_price'] ) ) . ' '. get_woocommerce_currency_symbol());

2. Please try adding this custom CSS code:


body .onsale.type-square {
    background-color: #f00;
    font-weight: bold;
    border-radius: 100em;
    color: #fff;
    border: none;
}

3. Please note that the brand logo image only displays on the single product page, to show the brand logo, please add an Image Element then select the dynamic tags > WooCommerce > Product Brand Image:

https://prnt.sc/c7iBybK1nxEe

Hope it helps!

#397807 Copied

Andrew Mitchell

Support staff

June 3, 2024 at 12:07

Dear Alpha111,

Choosing our theme reflects your commitment to quality, and for that, we’re genuinely grateful. As we constantly strive to elevate your experience, your feedback is an invaluable gift. Could you kindly take a moment to rate our product with 5 stars on ThemeForest?

Click here to share your insights: https://themeforest.net/downloads

Your support fuels our journey, and we appreciate it more than words can express.

Best Regards,
The 8Theme Team

#397886 Copied

Tagged: customize woocommerce labels, e-commerce product customization, edit product listings, modify woocommerce tags, personalize woocommerce labels, woocommerce label customization, wordpress woocommerce templates
Viewing 5 results - 1 through 5 (of 5 total)

The issue related to '‘customizing the labels on our product listings’' has been successfully resolved, and the topic is now closed for further responses

Customizing the labels on our product listings

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection