Product Subtitle for Woocommerce

  • MisterH

    (@hmarksthespot)


    3 years ago

    Hi there,

    Edit: What would be a simple way to implement this with ocean hooks?
    https://www.commercegurus.com/woocommerce-acf/

    We are using OceanWP, and wanted to figure out if there was a simple plugin or way to add a product subtitle to the archive page, under every product title or such.

    I have tried this below code in functions.php with some success. But there must be a better way.

    Should anyone have any better suggestions and or implementation that would be great!

    `//Register the product custom field
    add_action( ‘woocommerce_product_options_general_product_data’, ‘my_woocommerce_product_subheading’ );

    function my_woocommerce_product_subheading() {
    $args = array(
    ‘label’ => ‘Subheading’, // Text in Label
    ‘placeholder’ => ‘My Subheading’,
    ‘id’ => ‘product_subheading’, // required
    ‘name’ => ‘product_subheading’,
    ‘desc_tip’ => ‘The product subheading’,
    );
    woocommerce_wp_text_input( $args );
    }

    //Save the custom field as product custom post meta
    add_action( ‘woocommerce_process_product_meta’, ‘my_woocommerce_save_product_subheading’ );

    function my_woocommerce_save_product_subheading( $post_id ) {
    $product = wc_get_product( $post_id );
    $title = isset( $_POST[‘product_subheading’] ) ? $_POST[‘product_subheading’] : ”;
    $product->update_meta_data( ‘product_subheading’, sanitize_text_field( $title ) );
    $product->save();
    }

    //Display the custom field on product page loop below the title
    add_action( ‘ocean_after_archive_product_title’, ‘subheading_display_below_title’, 2 );
    function subheading_display_below_title(){
    global $product;

    // Get the custom field value
    $subheading = get_post_meta( $product->get_id(), ‘product_subheading’, true );

    // Display
    if( ! empty($subheading) ){
    echo ‘<p class=”subheading”>’.$subheading.'</p>’;
    }
    }

    • This topic was modified 3 years ago by MisterH.
Viewing 15 replies - 1 through 15 (of 16 total)
  • Abhishek

    (@abhikr781)

    Hello,

    Can you please share that page URL where you have added and what result you getting?

    And do you only want to show the subheading below the product title on the product archive page?

    Thread Starter MisterH

    (@hmarksthespot)

    Hi!

    Yes so I have recently been reading on this matter here: https://www.ads-software.com/support/topic/woocommerce-subtitle-placement/#post-15424047

    So essentially we wanted to add the product subtitle under the product title on the products archive page. Without much spacing or such, just a nice little subtitle right below it on the next line.

    I would prefer to discuss this over email and then if we come with a solution then I will post it here for others!

    Abhishek

    (@abhikr781)

    Hello,

    Thank you for providing the details.

    Please use the below hook to get the desired look.
    ocean_after_archive_product_title

    Or you can use the below code:

    function kia_add_subtitle_to_loop_product(){
	if( function_exists( 'the_subtitle' ) ) the_subtitle( '<h4 class="subtitle">', '</h4>' );
}
add_action( 'ocean_after_archive_product_title', 'kia_add_subtitle_to_loop_product', 20 );
    Thread Starter MisterH

    (@hmarksthespot)

    Hi Abhishek,

    Thanks for the code, it did show the subtitle in the page however it has 2 line gaps

    It shows as below

    Title

    Subtitle

    Price

    I would rather be happy if it were to appear as

    Title
    Subtitle

    ^With no spaces / line breaks in between, Also can you supply a small css snippet so it can be added to ocean wp customizer or such so one can easily manupulate the colour or size etc? Thanks

    Abhishek

    (@abhikr781)

    Hello,

    ?Please try to add the below CSS code from the Appearance > Customize > Custom CSS, and check.

    .woocommerce ul.products li.product .woo-entry-inner h4.subtitle, .woocommerce ul.products li.product .woo-entry-inner li.title {
    height: unset;
}
.woocommerce ul.products li.product .woo-entry-inner li.title h2 {
    margin-bottom: 5px;
}
    Thread Starter MisterH

    (@hmarksthespot)

    Thank you. With a bit of adding and such, we were able to make it work and get it the way we wanted! Very much appreciate Ocean WP support.

    Here is the css for anyone interested.

    /* KIA Subtitles Customize */
.woocommerce ul.products li.product .woo-entry-inner h4.subtitle, .woocommerce ul.products li.product .woo-entry-inner li.title {
    height: unset; 
	font-family: "Oswald";
	font-size: 11px;
	line-height: 1px;
	color: #322B2B;  
	font-weight: 300;
	letter-spacing: 0px;		 
}
.woocommerce ul.products li.product .woo-entry-inner li.title h2 {
    margin-bottom: 1px;
	
}

    However there is one other problem, If you go to this topic, it has a php code that can be added to the functions.php (originally Kia bridge plugin) however, that plugin adds support for single pages.

    Question is could you offer a bit of css that controls the single page and anything else that displays the subtitle on the front as well kindly?

    https://www.ads-software.com/support/topic/compatibility-with-latest-wp-and-wc/#post-15456180

    You are most welcome and Glad to hear that the previous issue has been resolved.??
    Thank you so much for sharing the solution with us.

    Sorry but didn’t get the exact issue, do you mean, you wanted to show the subtitle on the single product page also?

    If yes, please add the below snippet code in the functions.php file of your child theme, and check.

    function kia_add_subtitle_to_single_product(){
	if( function_exists( 'the_subtitle' ) ) the_subtitle( '<h4 class="subtitle">', '</h4>' );
}
add_action( 'ocean_after_single_product_title', 'kia_add_subtitle_to_single_product', 20 );

    If you are looking for something else, kindly share some more details and related snapshots.

    Thread Starter MisterH

    (@hmarksthespot)

    Thanks Abhishek,

    Sorry for the misunderstanding, I meant that we were able to get the KIA Subtitles to appear also in the single products and such using the Woocommerce Bridge it has.

    What I was asking was that

    1. if you see the code I posted above, you will see the code that allows it to appear in various placed in woo commerce, but some of those places may be differnt due to Ocean WP using different custom hooks, if you would kindly have a look through the code above.

    2. The css code only works for the archive pages, but not the single product and such pages, so if you would offer a new css for single pages or modify the existing one you gave so that it controls the single page and anything else that displays the subtitle on the front end as well. ??

    Many thanks!

    Thread Starter MisterH

    (@hmarksthespot)

    I hope I was able to explain the situation. ??

    Hello,

    Thank you for sharing the details.

    1. Yes, Can you please confirm at what location you want to display? so I will share that hook with you.

    Like, if you want to display it after the title, you use the below hook.
    ocean_after_single_product_title

    2. Please try the below CSS code.

    .single-product .single-post-title.product_title.entry-title>strong {
    font-family: "Oswald";
    font-size: 20px;
    line-height: 1px;
    color: #322B2B;
    font-weight: 300;
    letter-spacing: 0px;
}

    PS- Change the value in the above code according to need.

    Thread Starter MisterH

    (@hmarksthespot)

    Thank you, That code is not affecting the appearance. So we are trying to now change how the subtitles appear under the single product page, below is the code that is being used.

    We need

    1. The correct ocean css code to make the single product subtitles and such appear correct on the single page

    2. Correct ocean hooks for all the possible options on the below code that goes into functions php (so we need the ocean hooks instead of regular ones), if you can kindly check the code below and modify it as required to be used with ocean)

    3. Correct CSS codes for the other values (So far we have the css code for the shop archive page, but need the single product and the other features as on the code)

    // Single product.
function kia_add_subtitle_to_single_product(){
	if( function_exists( 'the_subtitle' ) ) the_subtitle( '<h2 class="subtitle">', '</h2>' );
}
add_action( 'ocean_after_single_product_title', 'kia_add_subtitle_to_single_product', 7 );

// Loop product.
function kia_add_subtitle_to_loop_product(){
	if( function_exists( 'the_subtitle' ) ) the_subtitle( '<h4 class="subtitle">', '</h4>' );
}
add_action( 'ocean_after_archive_product_title', 'kia_add_subtitle_to_loop_product', 20 );

// Shop loop page.
function kia_add_subtitle_to_shop() {
	if( function_exists( 'get_the_subtitle' ) && function_exists( 'is_shop' ) && is_shop() ) {
			
			$subtitle = get_the_subtitle( wc_get_page_id( 'shop' ) );
			
			if( $subtitle ) {
				echo '<h2 class="subtitle">' . $subtitle . '</h2>';
			}
		}
}
add_action( 'woocommerce_archive_description', 'kia_add_subtitle_to_shop' );

// Cart product.
function kia_add_subtitle_to_cart_product( $title, $cart_item ){
    if( function_exists( 'get_the_subtitle' ) && ( $subtitle = get_the_subtitle( $cart_item['product_id'] ) ) ) {
    	$title .= '<br/><span class="subtitle">' . $subtitle . '</span>';
    }
    return $title;
}
add_filter( 'woocommerce_cart_item_name', 'kia_add_subtitle_to_cart_product', 10, 2 );

// Order product.
function kia_add_subtitle_to_order_product( $title, $order_item ) {
    if( function_exists( 'get_the_subtitle' ) && ( $subtitle = get_the_subtitle( $order_item->get_product_id() ) ) ) {
    	$title .= '<br/><span class="subtitle">' . $subtitle . '</span>';
    }
    return $title;
}
add_filter( 'woocommerce_order_item_name', 'kia_add_subtitle_to_order_product', 10, 2 );

    Dear sir can you please provide me the code for exporting sub title in csv file from woocommerce.

    Thread Starter MisterH

    (@hmarksthespot)

    @freshtodoouae Hi, If you please read this topic and then go to KIA Subtitle it will be clear ho to use it. You need the KIA Woocommerce bridge code pasted on the functions php. use the one as posted here and the link here with the css files. Kindly start your own topic if you need help on setting the css etc.

    https://www.ads-software.com/support/topic/compatibility-with-latest-wp-and-wc/#post-15456180

    Hello @hmarksthespot ,

    Please try to install the Show hooks plugin, after installation goes to the single product page and use the show hooks option to get all the available hooks.
    https://www.ads-software.com/plugins/show-hooks/

    And use the hooks according to need. Once done with this, please share any single product page URL, so I’ll try to find a suitable code according to the position of the subtitle.

    Thread Starter MisterH

    (@hmarksthespot)

    I will kindly contact you directly via email with my other premium query and once we find a solution we can post it here.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Product Subtitle for Woocommerce’ is closed to new replies.