Customizing the labels on our product listings

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!

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!