WooCommerce: How to Edit Product Pages Like a Pro (2018 Guide for Beginners)
So, you’ve got a WooCommerce store up and running. Congratulations! Now comes the crucial part: making sure your product pages are irresistible to potential customers. In this guide, we’ll walk you through how to edit your WooCommerce product pages effectively, even if you’re a complete newbie. This is a guide that’s relevant to the features present in WooCommerce as of 2018. Although WooCommerce has changed since, the core principals remain useful.
Why is editing your product pages so important? Think of your product page as your digital salesperson. It’s where you convince visitors to click that “Add to Cart” button. A poorly designed or incomplete page will lead to abandoned carts and lost sales. We’ll cover the basics and a little extra to help you get started in 2018.
The Basics: Editing from the WordPress Dashboard
This is the most straightforward method. You don’t need any coding knowledge.
1. Log into your WordPress Dashboard: This is your base of operations. You know the drill: `yourdomain.com/wp-admin`.
2. Navigate to Products: In the left-hand menu, find the “Products” section.
3. Choose Your Product: You’ll see a list of all your products. Hover over the product you want to edit and click “Edit.”
4. The Product Editor Screen: This is where the magic happens! Let’s break down the key areas:
- Product Title: This is obvious! Make it descriptive and include relevant keywords. For example, instead of just “T-Shirt,” try “Mens Blue Cotton T-Shirt – Comfortable Fit.” Think about what people are searching for.
- Product Description: This is where you sell the product. Write compelling copy that highlights the benefits and features. Don’t just list specs; tell a story! For example, instead of “Material: 100% Cotton,” try “Experience unparalleled comfort in this 100% breathable cotton t-shirt. Perfect for everyday wear or a relaxing weekend.”
- Product Short Description: This appears near the product image and “Add to Cart” button. Use it to summarize the key selling points. Think of it as the elevator pitch for your product.
- Product Image: Use high-quality images that showcase your product from multiple angles. Imagine you’re buying a pair of shoes online. Would you buy them without seeing them from the side or back? Probably not!
- Product Gallery: Add multiple images to give customers a comprehensive view.
- Product Data: This section is crucial for pricing, inventory management, and shipping. We’ll dive deeper into this next.
- General Tab:
- Regular Price: The normal selling price.
- Sale Price: If the product is on sale, enter the discounted price here. Consider running sales periodically to boost revenue!
- Tax Status: Specify Check out this post: How To Setup Woocommerce Checkout Labeling On Google Analytics whether the product is taxable or not.
- Tax Class: Choose the appropriate tax class based on your location and product type.
- Inventory Tab:
- SKU: Stock Keeping Unit. A unique identifier for your product. This is important for tracking inventory.
- Manage Stock? Enable this to track inventory levels.
- Stock Quantity: The number of items currently in stock.
- Allow Backorders? Decide whether to allow customers to purchase the product even if it’s out of stock.
- Low Stock Threshold: Set a threshold that triggers a notification when stock levels are low.
- Shipping Tab:
- Weight: The weight of the product. Accurate weight is crucial for calculating shipping costs.
- Dimensions: The dimensions of the packaged product. Also important for accurate shipping calculations.
- Shipping Class: Assign a shipping class if you need to charge different shipping rates for certain types of products.
- Linked Products Tab:
- Upsells: Products you recommend instead of the current product (e.g., a higher-end model). Use upsells to increase the average order value.
- Cross-sells: Products you recommend on the cart page (e.g., related accessories). Encourage customers to add more items to their cart.
- Attributes Tab:
- Add Custom Attributes: Define characteristics like “Color,” “Size,” or “Material.” This is especially useful for variable products (like clothing with different sizes and colors).
- Advanced Tab:
- Purchase Note: A note displayed to the customer after they purchase the product. Use this to provide order updates or special instructions.
- Menu Order: Control the order in which products appear in Explore this article on How To Include Draft Products In Linked Products Woocommerce your store.
- Name: Enter the attribute name (e.g., “Color”).
- Values: Enter the available values, separated by a `|` (pipe) symbol (e.g., “Red | Blue | Green”).
- Used for variations: Crucially, check the “Used for variations” checkbox.
- Add Variation: Select “Create variations from all attributes” from the dropdown and click “Go.” This will automatically create variations for all possible combinations of your attributes.
- Product Title: “Funny ‘World’s Best Programmer’ Coffee Mug – 11oz Ceramic”
- Product Description: “Start your day with a laugh! This 11oz ceramic coffee mug features a humorous ‘World’s Best Programmer’ design. Perfect for developers, coders, and anyone who appreciates a good cup of coffee and a witty slogan. Dishwasher and microwave safe.”
- Product Short Description: “Hilarious ‘World’s Best Programmer’ coffee mug. Ideal gift for programmers. 11oz ceramic, dishwasher/microwave safe.”
- Product Image: A clear, well-lit photo of the mug, showing the design clearly.
- Product Data:
- Regular Price: $12.99
- Weight: 0.7 lbs
- Dimensions: 4 x 4 x 4 inches
- Using `functions.php`: You can add code snippets to your theme’s `functions.php` file to modify WooCommerce behavior.
Understanding the “Product Data” Section
The “Product Data” section is where you configure the essential details of your product. It changes slightly depending on the type of product you’re selling (simple, grouped, external/affiliate, or variable). Let’s focus on the most common type: *Simple Product*.
Adding Attributes and Using Them for Variable Products
If you sell products with variations (e.g., t-shirts in different colors and sizes), you need to use the “Variable Product” option and set up attributes.
1. Change Product Type: In the “Product Data” dropdown, select “Variable Product.”
2. Create Attributes: Go to the “Attributes” tab and click “Add.”
3. Create Variations: Go to the “Variations” tab.
4. Configure Each Variation: Click the “Expand” arrow next to each variation to configure its individual settings (price, stock, image, etc.). This is where you set the specific price for the “Red, Small” t-shirt, for example.
Example: Editing a Product Page for a Coffee Mug
Let’s say you’re selling a coffee mug. Here’s how you might edit the product page:
Going Further: Customizing with Code (For More Advanced Users)
While the above methods cover the basics, sometimes you need more control. This requires some PHP knowledge.
Important: Before making changes to your theme files, always back them up or use a child theme to avoid losing your customizations during theme updates.
For example, to add a custom field to the product page:
add_action( 'woocommerce_product_options_general_product_data', 'add_custom_product_field' ); function add_custom_product_field() { global $woocommerce, $post;
echo ‘
‘;
}
add_action( ‘woocommerce_process_product_meta’, ‘save_custom_product_field’ );
function save_custom_product_field( $post_id ) {
$custom_field = $_POST[‘_custom_product_field’];
if( ! empty( $custom_field ) )
update_post_meta( $post_id, ‘_custom_product_field’, esc_attr( $custom_field ) );
}
This code adds a text field labeled “Custom Product Field” to the product editing screen and saves the value to the product’s metadata. You would then need additional code to display this field on the front-end of your store.
- Template Overrides: You can override WooCommerce template files to customize the layout and appearance of your product pages. This is the most powerful but also the most complex method.
1. Find the template file you want to modify (e.g., `single-product.php` or `content-single-product.php`). These files are located in the `/woocommerce/templates/` directory within the WooCommerce plugin.
2. Create a `woocommerce` directory in your theme’s root directory.
3. Copy the template file you want to modify into the `woocommerce` directory in your theme.
4. Edit the copied file in your theme. WooCommerce will use the file in your theme instead of the one in the plugin.
SEO Tips for WooCommerce Product Pages
Editing your product pages isn’t just about aesthetics. It’s also about SEO!
- Keyword Research: Identify the keywords your customers are using to find products like yours. Use these keywords in your product titles, descriptions, and alt text for images.
- Optimize Product Descriptions: Write detailed, keyword-rich descriptions that highlight the benefits of your products. Don’t just copy and paste manufacturer descriptions; personalize them.
- Use Alt Text for Images: Add descriptive alt text to your product images. This helps search engines understand what your images are about.
- Optimize Product URLs: Make sure your product URLs are short, Discover insights on How To Customize The Products Page Woocommerc descriptive, and contain relevant keywords. For example, `yourdomain.com/product/blue-cotton-t-shirt` is better than `yourdomain.com/product/product123`.
- Internal Linking: Link to other relevant products on your site. This helps Read more about How To Improve Woocommerce Speed search engines discover your content and improves user experience.
Conclusion
Editing your WooCommerce product pages is an ongoing process. Continuously test different layouts, descriptions, and images to see what works best for your audience. By following the steps in this guide, you can create product pages that are both informative and persuasive, leading to increased sales and a more successful online store. Good luck!
