Intro to Custom Tabs on Product Detail page

  • Resolved jlgill

    (@jlgill)


    7 years, 8 months ago

    Ok, I’ve been through just about every tutorial video that dealt with my subject as well as trying to search the forum here and just cannot seem to find a start-up tutorial or directions for creating custom tabs in a product detail page.

    I want Product Details (default), Nutrition(custom), Feeding(custom) and eventually Reviews when I get that plugin installed. url: https://americanpet.com/products/?SingleProduct=3

    I’m close, but the Nutrition tab contains no info even though the product contains information.

    Are there any step-by-step directions for accomplishing this task. Also, how to I make the default “additional information” tab go away and instead be able to use only my custom tabs except maybe Contact and Reviews?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter jlgill

    (@jlgill)

    BTW — yes, this is the Premium version.

    Hi jlgill,

    I just had a couple of questions:

    1) What is the slug name for your “Nutrition” custom field?

    If you’re not sure how to find this, go to the Custom Fields tab and the slug name should appear in the “Field Slug” column. If it’s blank, you’ll need to add one by editing the “Nutrition” custom field.

    2) On the Add Tabs page (Product Page tab-> Selected Layout -> Add Tabs) what did you put in the Nutrition tab’s “Content” box?

    ——

    For hiding the Additional Information section, you can add this CSS code to the “Custom CSS” box in the edit Catalog page:

    .upcp-tabbed-addtl-info-menu {display:none;}

    Thread Starter jlgill

    (@jlgill)

    The slug name for Nutrition is nutrition. The slug name for Feeding is feeding.

    2) There is nothing on the Add Tabs Content Box because each product is going to have different content — not the same content for each product which would be added in the custom field when entering a new product.

    Thread Starter jlgill

    (@jlgill)

    For instance, I just added a new product under the category Animal, sub-category Chinchilla. https://americanpet.com/products/?&SingleProduct=6

    The custom fields when adding the product showed up and I entered the nutrition and feeding info for that product and saved. Yet that info does not show up under the Nutrition or Feeding tabs. (Got rid of the Additonal Info tab ?? — Thanks!

    Hi jlgill,

    Thanks for the info ??

    On the Add tabs page, the slug name should be in the Content box square brackets.

    So the Add tabs page will look something like this:
    slug-in-box

    If you want to add specific information to the Nutrition/Feeding tabs on “Smaks Treats Light”, edit that product and scroll down to the Nutrition and Feeding custom fields (they should be just below “Next/Previous Products” section).

    Thread Starter jlgill

    (@jlgill)

    Resolved! Amazing what square brackets can do! Thanks ?? Happy camper here!

    Thread Starter jlgill

    (@jlgill)

    Closing out.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Intro to Custom Tabs on Product Detail page’ is closed to new replies.