Viewing 9 posts - 1 through 9 (of 9 total)
  • #45569
    prevailin
    Member
    Post count: 11

    Dear forum users,

    1). I can’t figure out how to move the product title.
    I’s like the product title to be displayed above the product’s price.
    I’ve tried this:

    .woocommerce div.product .entry-title {
    display: block;
    float: right;
    width: 48%;
    text-align: left;
    font-size: 26px;
    margin-bottom: 30px;
    }

    This will move the title but leaves the original one too! Plus it becomes the normal Helvetica font. (needs to be New courier) Please note the attached file.

    #46390
    Melanie – SUPPORT
    Member
    Post count: 11032

    I’ll need to see your website live please ๐Ÿ™‚ THank you!

    #55548
    maidomall
    Member
    Post count: 10

    Hey, I’m not sure if this is the perfect solution or if it will mess up other stuff but I’ve managed to piece together bits and pieces from other people’s questions – and this is how I got it working.
    If anyone sees a problem with this, please let us know!

    /* This is to hide the original title */

    .single.single-product .heading-text {
    display: none;
    }

    /* This makes the new product title */
    .woocommerce div.product .entry-title {
    display: block;
    float: right;
    width: 48%;
    text-align: left;
    font-size: 26px;
    margin-bottom: 30px;
    }

    /* This fixes the title for mobile screen */

    @media (max-width: 600px) {
    .woocommerce div.product .entry-title {
    float:left;
    }
    }

    #55555
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    Thank you to share solution . You are genius .
    Cheers! ๐Ÿ˜€
    With Best Regards
    Swift Ideas

    #55566
    maidomall
    Member
    Post count: 10

    Hi,
    No worries, these support forums have helped me a lot!

    also if your title is looking squished on mobile devices remember to set width back to 100% in the media query.

    @media (max-width: 600px) {
    .woocommerce div.product .entry-title {
    float:left;
    width:100%
    }
    }

    #55614
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    I appreciate very much your help and solution .
    ๐Ÿ˜€
    With Best Regards
    Swift Ideas

    #58562
    MHC
    Member
    Post count: 247

    Hi,

    I added the css to move product title on single product page and it works well except on mobile devices. I also added the css maidomall provided to prevent product page looking squished on mobile devices, but it doesn’t work for me. Could you take a look to the attached screen shot/URL and let me know what css I can use to solve this?

    Thanks so much!

    #58566
    MHC
    Member
    Post count: 247
    This reply has been marked as private.
    #58619
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,

    @meihsun
    – Please create a new ticket with this request .
    Thanks
    With Best Regards
    Swift Ideas

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in and have valid license to reply to this topic.

License required for one of the following items
Login and Registration Log in · Register