Product Pages Guide

Product pages are an important part of your SureCart online store, and customizing them can enhance your overall customer experience.

This is the individual product page that shows up when you click on a particular product.

In this guide, we’ll walk you through multiple options for customizing product pages on SureCart.

Customizing Product Permalinks

Permalinks are like personalized address links for each product on your website. They help people find and access specific products easily.

You can edit multiple elements of this permalink according to your preferences.

• Navigate to the Permalinks section in your WordPress dashboard under Settings to customize product permalinks.

Product Template Customization:

When a customer clicks on an individual product, they are directed to a page that SureCart allows them to customize.

• To edit individual products, navigate to the desired product from your WordPress dashboard.

• To personalize your product page, select the Template option within the Publishing section.

The options may vary depending on your WordPress theme but for most people, these two options will be visible. Even if you’re using a block-based theme, the process remains similar.

• Here, select and edit your preferred page layout and template for your product page.

Add New Template

• With SureCart, you can also create a brand-new template for your product page. To do this, just click on the Add new template icon and give it a name.

• Click on the Edit template button to start customizing your product page.

• In the editor, click on the List view icon to view various customization options. You can explore these options located on the left-hand side of the page.

Editing the Product Title

• Upon selecting the Product Title, a mini editor block will appear on the right-hand side. Here, you can find some basic title customization settings, such as text position, alignment, heading levels, and more.

• To access more settings, simply click on the Settings icon located at the top-right corner.
• Here, you’ll find additional customization options, including background settings, adding links, adjusting spacing, padding, margin settings, and much more.

Customizing Product Price Choices

These are the prices associated with your product. You can customize how these prices are displayed. Choose the number of columns, display format, edit product prices.

You can also edit the sale text that will appear if the customer has selected “compare at price”.

Editing Product Description

A product description is like a brief written summary that tells you about the features and benefits of a product, helping you understand what it offers before you buy it.

You can change the text, experiment with background colors, try different fonts, adjust margins and spacing, align the product description, and more, all according to your preferences.

Customizing Product Variants

SureCart’s Product Variants feature allows you to offer different color options for your product. For instance, a phone model can be available in various colors.

You can customize the product variant block to suit your preferences. Modify the text color, background, and font for indicating the color of the variant.

You can also adjust the margin and padding settings to ensure a visually appealing layout with consistent spacing between multiple color blocks.

Customizing Pricing Options

These are the pricing options available for your product. This is different from the individual product price discussed above. For example, you can make a one-time payment or buy a subscription for the same product.

You have the option to add/remove pricing options by adjusting the columns section, decide whether to show or hide the price numbers right beside the pricing plans and change the label as well.

• The typical customization options, including text size, font, background colors, margins and paddings, and borders, are accessible below the styles tab.

Product Quantity and Add to Cart/Purchase Buttons

Product quantity shows the number of product items that are available in their inventory. Add to Cart and Buy Now buttons allow the customer to either move a product to their cart or buy it directly.

• You can modify product quantity label as well as the wording for the Add to Cart and Buy Now buttons based on your preferred terminology.

• You can also edit the terminologies for “out of stock” and “unavailable” labels that appear when an item is sold out or unavailable.

Change Product Featured Image

This is the featured image you usually see for the product.

With image customization you can:

• Replace the image to your preferred choice.
• Activate Auto Height that allows the image to fit to the page according to its height.
• Set your desired maximum image width.
• Easily control the number of thumbnails on display.

Click on the Save button at the top-right corner to apply your customizations.

Product Page Shortcodes

If you prefer creating product pages in your page builders theme builder feature, you can use the following shortcodes to display product information.

[sc_product_description] - The product description
Params: 
"id" - The ID of the product. 

[sc_product_price] - The currently selected price.
Params: 
"id" - The ID of the product.
"sale_text" - The text to show when the chosen price has a `compare at` price.

[sc_product_variant_choices] – This shortcode displays the variant choices of a product that contains variants.
Params:
"id" - The ID of the product.

[sc_product_price_choices]  -  This shortcode shows the pricing choice of a product.
Params:
"id" - The ID of the product.
"label" - The label to show above the price choices.
"columns" - The number of columns to show the price choices in.
"show_price" - Whether or not to show the price in the price choices.

[sc_product_media] - The product image or slideshow.
Params:
"id" - The ID of the product.
"auto_height": - Should the slideshow automatically adjust its height to the current slide's height?
"height": - The height of the slideshow. This is disabled for auto_height.
"width": - The max width of the slideshow or image.
"thumbnails_per_page": - The number of thumbnails to show per page.

[sc_product_quantity] - The product quantity selector.
Params:
"id" - The ID of the product.
"label" - The label to show above the quantity selector.

[sc_product_cart_button] - The add to cart button.
Params:
"id" - The ID of the product.
"text" - The text to show on the button.

Check out our guide on shortcodes to learn how to integrate them into your own WordPress website.

We hope this guide helped you. If you have any questions, please don’t hesitate to contact our support team. We’re here to help!