WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
'Single Product' Page - Adding top margin (above product title/ header) (4 posts)

  1. CRMacDonald5
    Member
    Posted 2 months ago #

    Hey everybody,

    I'm looking for help in adding some space above the product title in the single product page within the text block.

    Specifically, I would like to add spacing above the 'Paradigm Curve | Byzantine' product title here:

    http://paradigmcurve.com/?product=paradigm-curve-byzantine

    Any help in this regard would be greatly appreciated!

    Cheers*

    https://wordpress.org/plugins/woocommerce/

  2. CRMacDonald5
    Member
    Posted 2 months ago #

    Solved-

    I edited the following child theme file:

    ...child-theme/woocommerce/single-product/title.php

    Before edit:

    if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

    ?><P>
    <font color="white"><h2 itemprop="name" class="product_title entry-title"><?php the_title(); ?></h2></font>

    After edit:

    if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

    ?><P>
    <font color="white"><h2 itemprop="name" class="product_title entry-title" style="margin-top: 2em"><?php the_title(); ?></h2></font>

    Hopefully this helps future inquiries people may have relating to this subject.

    Cheers*

  3. CRMacDonald5
    Member
    Posted 2 months ago #

    EDIT:

    I've found an alternative way to customize the size, colour, and padding of the Woocommerce 'Single Product' page title:

    - Dashboard > Appearance > Editor > style.css
    - Add the following coding:

    .product_title {
    color: #ffffff !important;
    font-size: 18px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    }

    That's it. Hope this helps others*

  4. CRMacDonald5
    Member
    Posted 2 months ago #

    EDIT:

    Ok, the coding I just posted works very well; however, while it customizes the product title, the padding applies to the title while leaving the product image in its original spot (now slightly above the product title).

    So here is the final edit:

    .product_title {
    color: #ffffff !important;
    font-size: 18px !important;
    }

    .single-product .product { padding-top: 10px !important; }

    This allows you to edit the color and font size of the single product title, while adding space/ padding to both the single product image AND the single product title. This makes it aesthetically more uniform and even.

    Cheers*

Reply

You must log in to post.

About this Plugin

About this Topic