Move blocks & CSS

Hello,

Thank you so much for contacting our support center.

Here is a code snippet that you may add to the functions.php file in your child theme to swap tabs content with products.

add_action( 'basel_after_product_content', 'basel_open_upsells_container', 40 );
add_action( 'basel_after_product_content', 'woocommerce_upsell_display', 50 );
add_action( 'basel_after_product_content', 'basel_close_upsells_container', 60 );
add_action( 'wp', 'basel_remove_upsells', 1000 );
function basel_remove_upsells(){
	remove_action( 'basel_woocommerce_after_sidebar', 'woocommerce_upsell_display', 10 );
}
function basel_open_upsells_container(){
	echo '<div class="container related-and-upsells">';
}
function basel_close_upsells_container(){
	echo '</div>';
}

Unfortunately, we can’t change the color of a text-underline property in CSS.

And here is a snippet that you need to add to the Custom CSS to remove red line.

.single-product .upsells .slider-title:before{
	display: none;
}

Kind Regards
XTemos Studio

Hi, replace the line in functions.php file

add_action( 'wp', 'basel_remove_upsells', 1000 );

with this one

add_action( 'wp', 'basel_remove_upsells', 1100 );.

Do you mean that they are caused by code we gave you? Please, temporarily remove it so we can see is it caused by changes or not.

OK, we see the issue. But unfortunately, it means that this block can’t be moved to the desired position without any breaks. If you want to do this you may need to perform additional code customization to change product page markup completely that is out of our free theme support scope.

Thank you for understanding.

Lets try an another hot fix using CSS. Try to add the following code snippet to the Custom CSS in Theme Settings

.single-product .related-and-upsells .variations_form{
	display: none;
}
.single-product .related-and-upsells .price{
	font-size: 16px;
}
.single-product .related-and-upsells .price .amount{
	color: #949494 !important;
}

You can reduce this margin with the following Custom CSS code

.single-product-content .product-image-summary {
	margin-bottom:10px;
}

It would be kind of you if you will rate our theme with 5 stars and leave a positive feedback on Theme Forest 🙂

Kind Regards
Xtemos

You are welcome 🙂