Single product page woocommerce php

How to Edit the WooCommerce Single Product Template Programmatically

Despite the fact that you can customize every aspect of your store, the single product template is the main page where most customizations take place in WooCommerce. You must focus on it if you wish to maximize revenue and strengthen the beginning of the buying process. We’ll show you how to programmatically modify the WooCommerce single product page in this post.

How to edit the WooCommerce single product template

The following topics will be discussed:

• Using hooks
• Override WooCommerce template files
• Customizing the product page with CSS scripts

The output of the product page is handled by two key WooCommerce files:

WooCommerce Single Product Template Hooks: Actions and Filters

“wc” equals “woocommerce“

• wc_before_single_product
• wc_before_single_product_summary
• wc_single_product_summary
• wc_before_add_to_cart_form
• wc_before_variations_form
• wc_before_add_to_cart_button
• wc_before_single_variation
• wc_single_variation
• wc_before_add_to_cart_quantity
• wc_after_add_to_cart_quantity
• wc_after_single_variation
• wc_after_add_to_cart_button
• wc_after_variations_form
• wc_after_add_to_cart_form
• wc_product_meta_start
• wc_product_meta_end
• wc_share
• wc_after_single_product_summary
• wc_after_single_product

Edit the WooCommerce single product template using hooks

Check out this guide if you’re unfamiliar with WooCommerce hooks and how to use them.

Removing elements

You may use a variety of WooCommerce hooks to delete any feature from a single product template. Each one can operate for a particular set of items, so make sure you use the right hook, WooCommerce callback function, and a priority value. Both hooks and their associated parameters can be found above or in comments in the WooCommerce plugin’s content-single-product.php file.

// remove title remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 ); // remove rating stars remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 ); // remove product meta remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_meta',40 ); // remove description remove_action( 'woocommerce_single_product_summary','woocommerce_template_single_excerpt',20 ); // remove images remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images',20 ); // remove related products remove_action( 'woocommerce_after_single_product_summary','woocommerce_output_related_products',20); // remove additional information tabs remove_action('woocommerce_after_single_product_summary','woocommerce_output_product_data_tabs',10);

Reorder elements

It’s easy to rearrange the elements of the single product template. You must first delete the hook in the same fashion as before, and then re-add it with a different priority/order number.

// change order of description remove_action('woocommerce_single_product_summary','woocommerce_template_single_excerpt',20); add_action('woocommerce_single_product_summary','woocommerce_template_single_excerpt',6 );

Add elements

To add new content, use the following hook:

add_action('woocommerce_after_single_product_summary','pe_after_single_product_summary'); /** * Add some text after the product summary text. * * Hook: woocommerce_after_single_product_summary */ function pe_after_single_product_summary() < echo '
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
'; >

Edit product tabs

We can delete, reorder, or add a new tab in the Additional Information segment using the woocommerce product tabs filter hook. The following script will remove the Description tab and its contents, rename the Reviews tab, and transfer Additional information to the top of the priority list.

add_filter( 'woocommerce_product_tabs', 'pe_remove_product_tabs', 98 ); function pe_remove_product_tabs( $tabs ) < unset( $tabs['description'] ); // Remove the Description tab $tabs['reviews']['title'] = __( 'Ratings' ); // Rename the Reviews tab $tabs['additional_information']['priority'] = 5; // Additional information at first return $tabs; >

Overriding WooCommerce template files

Overriding the template files is the second way to programmatically edit the WooCommerce single product template. Since this approach is a little riskier than the previous one, we suggest that you back up the whole website first.

Overriding WooCommerce template files are close to overriding every other file in your child theme, so if you don’t have one, we suggest creating a child theme or using one of these plugins to prevent missing your customizations when you upgrade your theme:

1. Child Theme Configurator (Free and Premium)
2. Child Theme Generator (Free)
3. Childify Me (Free)
4. Child Theme Wizard (Free)
5. WPS Child Theme Generator (Free)
6. Generate Child Theme (Free)
7. Child Theme Creator by Orbisius (Free and Premium)
8. WP Child Theme Generator (Free)

Edit the single product template

Edit your child theme files directory and create a WooCommerce folder. Then, copy the single-product.php file and paste it in your child theme folder, in the WooCommerce directory.

Open the file and notice this line: wc_get_template_part(‘content’,’single-product’);

This is where the content-single-product.php file comes into play, printing all of the current product’s elements to finish the loop and create the layout. If you want to override this file and create something different you can do that here. Be careful and always backup your files.

Customizing the product page with CSS scripts

CSS code is another convenient and easy way to programmatically update the WooCommerce single product template (or any other page). This will assist you in styling the single product template and making it the company’s look and feel.

To start, build a new file with the .css extension in your child theme to which you can add your CSS code. To make it easier to search, call it single-product.css or something similar. Then, in the child theme’s main folder, put the file on the same level as functions.php and style.css . Then, in your child theme’s functions.php file, paste the following script, replacing the name of your CSS file if required.

add_action( 'wp_enqueue_scripts', 'pe_custom_product_style' ); function pe_custom_product_style() < if ( is_product() )< wp_register_style( 'product_css', get_stylesheet_directory_uri() . '/single-product.css', false, '1.0.0', 'all' ); wp_enqueue_style('product_css'); >>

In conclusion

To summarize, customizing the online shop is critical for standing out from the crowd. Brand pages are some of the most critical pages in every shop, and there’s a lot you can do to enhance the consumer experience and maximize revenue by improving them.

We’ve seen three different ways to configure the single product template in this post:

Do you have any problems following our instructions? Please let us know in the comments section below, and we will do all we can to assist you.

Relevant Links

Источник

WooCommerce Visual Hook Guide: Single Product Page

Here’s a visual hook guide for the WooCommerce Single Product Page. This is part of my “Visual Hook Guide Series“, through which you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can copy/paste). If you like this guide and it’s helpful to you, let me know in the comments!

Now that you know the product page hooks, you can override the WooCommerce Single Product Page via your child theme’s functions. You can remove default elements (for example, the featured image, the add to cart form, related products…), you can add your custom elements by picking the correct positioned “hook” and triggering your function, and you can even “move” existing elements. Need a video tutorial? Watch it now →

WooCommerce Single Product Page [Visual Hook Guide]

woocommerce_product_thumbnails (may not work)

Product Title

woocommerce_after_add_to_cart_button
woocommerce_after_variations_form
woocommerce_after_add_to_cart_form

woocommerce_product_meta_start SKU: htr554yn
Category: Bracelets
Tags: tag1, tag2
woocommerce_product_meta_end

Product Description

This is the long description!

Additional Information

You may also like…

• 

Test product

WooCommerce Single Product Page Default Actions

This is the list of WooCommerce actions you can unhook/remove by simply changing “add_action” to “remove_action” in your functions.php. WooCommerce uses its own hooks e.g. “woocommerce_before_single_product_summary” to assemble the single product page together. Because it’s done this way, you can therefore use “remove_action” to remove one of these elements. I’ve also added other “do_action” which don’t have a trigger function at the moment, but that you can use for adding content to the product page.

/** * @snippet List of Default Actions @ WooCommerce Single Product * @how-to Get CustomizeWoo.com FREE * @author Rodolfo Melogli * @updated WooCommerce 4.0 * @donate $9 https://businessbloomer.com/bloomer-armada/ */ // Before content add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 ); add_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 ); add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices', 10 ); // Left column add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 ); add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 ); add_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 ); // Right column add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 ); add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 ); add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 ); add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 ); // Right column - add to cart do_action( 'woocommerce_before_add_to_cart_form' ); do_action( 'woocommerce_before_add_to_cart_button' ); add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 ); add_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 ); add_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30 ); add_action( 'woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30 ); add_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 ); add_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 ); add_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 ); do_action( 'woocommerce_before_quantity_input_field' ); do_action( 'woocommerce_after_quantity_input_field' ); do_action( 'woocommerce_after_add_to_cart_button' ); do_action( 'woocommerce_after_add_to_cart_form' ); // Right column - meta add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 ); do_action( 'woocommerce_product_meta_start' ); do_action( 'woocommerce_product_meta_end' ); // Right column - sharing add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 ); do_action( 'woocommerce_share' ); // Tabs, upsells and related products add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 ); add_action( 'woocommerce_product_additional_information', 'wc_display_product_attributes', 10 ); do_action( 'woocommerce_product_after_tabs' ); add_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 ); add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 ); // Reviews add_action( 'woocommerce_review_before', 'woocommerce_review_display_gravatar', 10 ); add_action( 'woocommerce_review_before_comment_meta', 'woocommerce_review_display_rating', 10 ); add_action( 'woocommerce_review_meta', 'woocommerce_review_display_meta', 10 ); do_action( 'woocommerce_review_before_comment_text', $comment ); add_action( 'woocommerce_review_comment_text', 'woocommerce_review_display_comment_text', 10 ); do_action( 'woocommerce_review_after_comment_text', $comment ); // After content do_action( 'woocommerce_after_single_product' ); do_action( 'woocommerce_after_main_content' );

WooCommerce Single Product Page Customization – Video Tutorial

Check this video where I explain how to customize the single product page and how to use the visual hook guide.

You can find out how to ADD content to the Single Product Page without overriding the WooCommerce plugin. Call the WordPress add_action function, select the correct WooCommerce Single Product Page hook (a.k.a. the correct position in the page), and trigger your custom function.

You can for example add banners, text, variable values, iframes, and so on without even touching the WooCommerce core files.

Источник