Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • June 15, 2017 at 1:31 am #808340
    nickgin

    Hello Sirs,

    How are you?

    I would like to position SKU below the price in single product page.

    I used the following css code:

    span.sku_wrapper {
    display: block;
    font-weight: bold;
    position: absolute;
    top: -500px;
    }

    The css code worked, as you see in screenshot: https://prnt.sc/fjvolp
    but when the post excerpt is bigger with more text, then the text overlaps SKU…
    …as you see in screenshot: https://prnt.sc/fjvowc

    Could you help me?

    I need your precious support…

    Best Regards,
    Nick

    June 15, 2017 at 2:33 am #808348
    Mike

    Hey nickgin,
    Please include the url to the pages in question so we can take a closer look.

    Best regards,
    Mike

    June 16, 2017 at 4:01 pm #808987
    nickgin

    Hello Mike,

    Thank You very much for your quick answer.

    url (SKU in correct position)

    LG 43LH500T TV 43″ LED Full HD 200 Hz

    url (SKU in wrong position)

    JL903 Earphones Blue

    I am waiting your answer.

    Thank You for your excellent support.

    Best Regards,
    Nick

    June 17, 2017 at 2:07 pm #809295
    Mike

    Hi,
    Try this code in the General Styling > Quick CSS field:

    .template-shop .product_meta{position: absolute!important; top: 750px!important; }

    Or you could try editing your copy of wp-content/themes/enfold/config-woocommerce/woocommerce-mod.css and changing these two lines, but if you do this you should use a child theme: Read about it & Get it here
    postimage

    Best regards,
    Mike

    June 17, 2017 at 4:50 pm #809328
    nickgin

    Hi Mike,

    Thank You for your excellent support!

    Your css code worked with SKU, but I have some side effects now.

    Some classes such as posted_in, tagged_as & div.woocommerce-tabs.wc-tabs-wrapper are overlapped.

    See on screenshots: https://prnt.sc/fkw2s2
    https://prnt.sc/fkw2zw

    I am waiting your answer.

    Best Regards,
    Nick

    • This reply was modified 7 years, 6 months ago by nickgin.
    June 17, 2017 at 5:05 pm #809334
    Mike

    Hi,
    can you please remove “.template-shop” from the code I gave you and see if that helps, otherwise please remove all and I’ll have to try again :)

    Best regards,
    Mike

    June 17, 2017 at 5:46 pm #809341
    nickgin

    Thank you for your answer Mike, but unfortunately it didn’t work… the elements still are overlapped.

    I am using the following css code:

    span.sku_wrapper {
    display: block;
    font-weight: bold;
    position: absolute;
    top: -500px;
    }

    .product_meta {
    position: absolute!important;
    top: 750px!important;
    }

    I am waiting your support.

    Best regards,
    Nick

    June 17, 2017 at 10:46 pm #809403
    Mike

    Hi,
    OK, I’ll have to try again.
    Can you please include a admin login in the private content area so we can take a closer look?

    Best regards,
    Mike

    June 17, 2017 at 11:08 pm #809406
    nickgin

    Ok, thank you very much Mike!

    Best regards,
    Nick

    June 21, 2017 at 6:37 am #810761
    Ismael

    Hi,

    Please remove the css codes then add this script in the functions.php file.

    // sku position
function ava_custom_script_mod(){
?>
<script>
(function($){
	function a() {
			$('.sku_wrapper').insertAfter('.pwb-single-product-brands');     
	}

	a();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_custom_script_mod');

    Best regards,
    Ismael

    June 21, 2017 at 1:07 pm #810946
    nickgin

    Hi Ismael.

    You are a brilliant moderator!! You are a perfect team!!

    It worked!! Thank You very much!!

    Best regards,
    Nick

    June 21, 2017 at 6:32 pm #811099
    Victoria

    Hi Nick,

    Glad you got it working for you! :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.