Eze

Hi there,

Thank you for reaching out.

To change your website logo, navigate to the theme Customizer > Site Identity > Site Title and Logo Control. Here is a screencast for your reference:
https://share.zight.com/bLubwjke

To change your website color, navigate to the theme Customizer > Colors & Fonts > Color – Typography. Here is a screencast for your reference:
https://share.zight.com/o0uLmv7R

I hope this helps. Please let us know how we can help further.

Cheers,
Eze

Hi David,

Thank you for the additional information.

There is no built-in option to remove the Navigation block divider on the sidebar.

You can use this custom CSS to remove the divider:

.sidebar-inner-wrap .collapse-sub-navigation ul.menu li a{
border:0px;
}
.sidebar-inner-wrap .collapse-sub-navigation ul.menu .drawer-nav-drop-wrap .drawer-sub-toggle {
border:0px !important;
}

Here is how to add the custom CSS to your website:
https://www.kadencewp.com/help-center/docs/kadence-theme/how-do-i-add-custom-css/

Watch this demo screencast of what happens when the CSS code is added to your website:
https://share.zight.com/eDuedGql

You can further customize the sidebar from the theme Customizer > General > Sidebar

I hope this helps. Please let us know how we can help further.

Cheers,
Eze

Hi @jasonpowu,

Thank you for reaching out.

Here is a screencast of your website header:
https://share.zight.com/bLuQyyYz

Can you please provide additional information on what you are trying to achieve with the header?

In the meantime, if you are trying to reduce the header height, navigate to the theme Customizer > Header > Click on the Header Rows and reduce the Min Height value. Here is a screencast for your reference:
https://share.zight.com/kpueRREP

Also, you can change the Header Rows Layout as shown in the screencast.

Please let us know how we can help further.

Cheers,
Eze

Hi @freddyeee,

Based on the information you provided, it seems like the issue might be related to the product’s attributes. In some cases, when a product has attributes, the code used to display the “You save(x%)” message might not work properly.

One possible solution could be to modify the code to handle the product’s attributes more gracefully. For example, you might need to adjust the code to check for the presence of attributes and handle them differently depending on the type of attribute (e.g., colour, size, etc.).

Here is an updated code snippet that should handle both simple and variable products with attributes:

add_action( 'woocommerce_single_product_summary', 'display_savings_percentage', 12 ); 

function display_savings_percentage() { 
global $product;     

$regular_price = $product->get_regular_price(); 
$sale_price = $product->get_sale_price();          

if ( ! $regular_price || ! $sale_price ) {         
return;     
}     

if ( $product->is_type( 'variable' ) ) {         
$min_price = $product->get_variation_regular_price( 'min', true );         $max_price = $product->get_variation_regular_price( 'max', true );         $min_sale_price = $product->get_variation_sale_price( 'min', true );         $max_sale_price = $product->get_variation_sale_price( 'max', true );         

if ( ! $min_price || ! $max_price || ! $min_sale_price || ! $max_sale_price ) {
return;         
}         

$regular_price = ( $min_price === $max_price ) ? $min_price : $min_price . ' - ' . $max_price;
$sale_price = ( $min_sale_price === $max_sale_price ) ? $min_sale_price : $min_sale_price . ' - ' . $max_sale_price;     
}     

$savings_percentage = round( ( $regular_price - $sale_price ) / $regular_price * 100 ); 
echo '<p class="savings-percentage">You save ' . $savings_percentage . '%</p>'; }

This code should check if the product is a variable product, and if so, calculate the minimum and maximum regular and sale prices for all variations, and then display the appropriate message with the savings percentage.

If the product is a simple product, the code should work as before and calculate the savings percentage based on the regular and sale prices.

If the above solution doesn’t work, I will advise that you consider reaching out to WooCommerce for further assistance.

I hope this helps.

Cheers,
Eze

Hi @zenguided,

The fix to the Post Block Unboxed Content Style Layout issue has been applied to the Kadence Theme 1.1.34 update. See theme update log:
https://www.kadencewp.com/kadence-theme/changelog/

Kindly update the Kadence Theme on your website and let us know if helped.

Cheers,
Eze

Hi Robert,

Yes, you can assign image dimensions to your product images so that the space for the image is dedicated when the page loads. This can help reduce CLS (Cumulative Layout Shift) issues on your mobile product pages.

Follow the steps below to achieve this:
1. Go to the WordPress Dashboard and navigate to Appearance > Customize.
2. In the left sidebar, click on Additional CSS.
3. Add the following CSS Code:

.woocommerce div.product div.images img {
width: 100%;
height: auto;
max-width: 500px;
max-height: 500px;
}

4. Click Publish

In this code, we are selecting the product image element and setting its width to 100% of its container, while also specifying a maximum width and height of 500 pixels. This will ensure that the image is always scaled proportionally and fits within its container, while also reserving the correct amount of space on the page.

You can adjust the maximum width and height values to suit your specific needs. Once you have published this update, you should see an improvement in CLS on your mobile product pages.

Please let me know if this works.

Cheers,
Eze