Skip Navigation

This thread is resolved. Here is a description of the problem and solution.

Problem:
The client needed guidance on how to add spacing above the text in the Additional Information Tab on a WooCommerce site, as the text appeared too close to the line above and was difficult to read.
Solution:
https://wpml.org/forums/topic/how-i-can-style-this-text-wrapped-on-php/#post-16610121

Please note that this solution might be irrelevant due to changes in the theme or our code. If this solution does not resolve your issue or seems outdated, we highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If further assistance is needed, please open a new support ticket at WPML support forum.

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: 

This topic contains 1 reply, has 0 voices.

Last updated by Noman 1 week, 3 days ago.

Assisted by: Noman.

Author Posts
January 19, 2025 at 8:52 am #16610115

xavierC-5

Hi,

I know it's out of your scope, but can you guide me or give me some hints on how I can style this text wrapped on php?

I'm a self-taught web designer and I tried everything but cannot. I'm just trying to give some space above the text I just added on the Additional Information Tab. The text appears really closed to the above line and is difficult to read it.

Appreciate any guidance where to look for it.

Best,
Xavier

January 19, 2025 at 9:07 am #16610121

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi,

Thank you for contacting WPML Support. You should be able to achieve it by following the below steps:

1. Wrap the text in div tag and add the class selector to apply the CSS to that selector, so here will be the updated code:

<?php
add_action('woocommerce_product_additional_information', 'add_custom_content_to_additional_info'); function add_custom_content_to_additional_info() { _e('

<div class="notice-disclaimer">*Image Disclaimer: Due to the digitalization of the image, the display technologies and the lighting, small variations of product color may occur.</div>

', 'insert-headers-and-footers'); }

2. Now, you can apply any style using the “notice-disclaimer” selector by adding the below CSS to the custom CSS section of the theme:

.notice-disclaimer {
	margin-top: 10px;
}

I just added top margin CSS, you may adjust it according to your needs.

Please understand that I'm helping you here with an issue that is out of the scope of our support forum and we will not be able to support the fix that we give you in the future. Because the theme or our code might have changed, so please always be aware of this.

Thank you