Skip Navigation

[Resolved] help me with putting additional html tags and classes for styling.

The Toolset Community Forum is closed, for technical support questions, please head on to our Toolset Professional Support (for paid clients), with any pre-sale or admin question please contact us here.
This support ticket is created 8 years ago. There's a good chance that you are reading advice that it now obsolete.
This is the community support forum for Types plugin, which is part of Toolset. Toolset is a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients and people who registered for Types community support can post in it.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 14 replies, has 2 voices.

Last updated by Luo Yang 8 years ago.

Assisted by: Luo Yang.

Author
Posts
#380525

I am using views and types to design single product pages. I am using a theme called Bridge. I followed instruction in this site and put in those fields.

[wpv-post-title][wpv-woo-product-image size="shop_single" output="" gallery_on_listings="no"][wpv-post-excerpt][wpv-woo-product-price][wpv-woo-buy-options add_to_cart_text=""][wpv-woo-display-tabs]

And the single product page looks like in the screenshot. Can you help me with what additional codes that I need to put in there or teach me how the codes work. I don't know anything about the tags, classes, etc. (I don't know what 'div' does. etc. )

Also the product archive pages show no pagination (no numbers or arrows). Help please..

#380778

Dear Daniel,

I assume you are using Woocommerce Views plugin to customize the single "Product" post and archive page of post type "Product",
Here are some documents for how to use it:
Getting Started with WooCommerce Views
https://toolset.com/documentation/user-guides/getting-started-woocommerce-views/
and WooCommerce Views shortcodes:
https://toolset.com/documentation/views-shortcodes/#woocommerce-views

Since I do not have a copy of your theme "Bridge", If you need more assistance for it, please post a downloadable URL for the theme "Bridge", I need test and debug it in my localhost.

#381159

I read the documents on the links that you gave me, but there is no infomation on styling of the templates. I understand that I need to use html tags, classes from my theme etc.. but there's no instruction of how to use them. What I need to do is to change positions of the elements, align them, change color of tabs, maybe put borders around title texts, change fonts, etc.. just basic styling. Could you teach me how to do that please.

#381164

You will need to use custom CSS codes to customize basic styling, for example, the document of CSS in w3.org:
hidden link

And there are some CSS Tutorial:
hidden link

Hope it help

If you still need help for it, I suggest you post a live problem URL here, describe details for what you are going to achieve, I can test and debug it in my chrome browser, thanks

#381369

I uploaded a screenshot here but I don't see anything, so I'll draw it here.

Product image name
price
points

options 1 ______________
options 2 ______________

product description
social share buttons

product details

related products

product reviews

product Q&A

This is basically what I need. the options box will have a dropdown menu where you can choose different options. For the social share buttons I have a plugin. Can you tell me what tags/codes what I need to put in?

product image on the left, and name/price/points/options1.2/product description/social share buttons on the right. And below all of it product details/related products/product reviews/product Q&A at full width

#381441

Since I do not have a copy of your theme file "Bridge", so I create a demo site with wordpress default theme "2016":
hidden link
username/password: xgren/111111

1) In the woocommerce-views setting page:
hidden link
section "Product Template File", choose option "WooCommerce Views plugin default single product template"

2) I assume we are talking about woocommerce "Variable product", so I create a test product post:
hidden link

3) Create a content template and bind it to all single product post:
hidden link
with below codes:

<div class="my-right">
  <h2>[wpv-post-title]</h2>
  <div class="product-price">
    <h5>Price:</h5>
    [wpv-woo-product-price]
  </div>

  <div class="product-options">
    <h5>Options:</h5>
    [wpv-woo-buy-options add_to_cart_text=""]
  </div>

  <div class="product-description">
    <h5>Product description:</h5>
    [wpv-post-excerpt]
  </div>
<div class="share-buttons">
  <h5>social share buttons</h5>
</div>

</div>

<div class="my-left">
  <div class="product-image">
    <h5>Product image:</h5>
    [wpv-woo-product-image size="shop_single" output="" gallery_on_listings="no"]
  </div>
</div>

<div class="product-details">
  <h5>product details:</h5>
  [wpv-post-body view_template='None' suppress_filters='true']
</div>

<div class="related-products">
	<h5>related products:</h5>
</div>

<div class="product-reviews">
	<h5>product reviews:</h5>
</div>

<div class="product-qa">
	<h5>product Q&A</h5>
</div>

And you can see, in above codes those items need to be displayed in the left, I put it into div class="my-left", items need to be displayed in the right, wrap them into div class="my-right".

click "CSS editor", add below CSS codes:

.my-left {
  float: left;
  width: 200px;
  background: lightblue;
}
.my-right {
  float: right;
  width: calc(100% - 200px);
  background: lightgreen;
}

See the result page:
hidden link

And it is only a demo for you, you will need customize it with your custom CSS codes. hope it help

#382413

okay, I've put in the codes you gave me and made a bit of modifications, but it does not look good. All the contents go to the very left of the screen. I have a screen that is 1920 pixels wide, and I have turned on a grid option in my theme, so it looks on my screen like this

about 470px space contents about 470px space

1. I want all my contents to fit into the contents are in the middle.
2. the option box does not appear with the code you give me. And I don't know how you put in blue/green as options
3. where do you put in contents for product description
4. I want product details and below to be at full width and the titles in center
5. the product details section will be the longest and will have lots of contents including pictures.
6. the product reviews and product q&a will each have a table and I am planning to put them in using a plugin I am using.

I understand what div class and corresponding css codes do now. Could you tell me in detail what other codes I should put in. I need to get this done ASAP. Thanks.

#382488

As I mentioned above, it is only a demo, you will need customize it with custom CSS codes, and I do not have a copy of your theme files, I can not duplicate same problem, please duplicate same problem in a test site, and fill below private detail box with login details and ftp access, I need test and debug it in a live website, thanks

#382579

.

#383106

You can create an admin account in your current website, and fill below private detail box with login details, also point out the problem page URL, thanks

#384532

sorry, I tried the credentials you provided, but can not login your website, I get this error:
오류: ID msjk705에 대한 비밀번호가 틀립니다. 비밀번호를 잊으셨나요?

Please check it, thanks

#384665

If you try again now, it will work. Thanks

#384815

Thanks for the details, I can login your website, I assume we are talking about the problem product post:
hidden link
Q1) I want all my contents to fit into the contents are in the middle.
You can simply use the default CSS style from your theme files, for example:
edit the content template:
hidden link
wrap all codes into HTML codes:

<div class="container_inner default_template_holder clearfix page_container_inner"><div class="vc_row wpb_row section vc_row-fluid ">
...
</div></div>

Q2) the option box does not appear with the code you give me. And I don't know how you put in blue/green as options.
Please check the test site, it is a Variable product:
hidden link
in section "Product Data", click "Variations"
More help:
hidden link

Q3) where do you put in contents for product description
Same as above test site:
hidden link
see section "Product Short Description"

Q4) I want product details and below to be at full width and the titles in center
You can add CSS class from your theme file, for example the CSS class "clearfix", like this:

...
<div class="product-details clearfix">
  <h5>product details:</h5>
  [wpv-post-body view_template='None' suppress_filters='true']
</div>
...

Q5) the product details section will be the longest and will have lots of contents including pictures.
Yes, it is possible, you just need to put them into the post content box, see the the product post in admin side:
hidden link
string "Product details here ..."

Q6) . the product reviews and product q&a will each have a table and I am planning to put them in using a plugin I am using.
That depends on yourself.

And there is build-in float left and right CSS class in your theme files, for example:
hidden link
I replace the CSS class name "my-left" with "images", like this:

<div class="images">
  <div class="product-image">
    <h5>Product image:</h5>
    [wpv-woo-product-image size="shop_single" output="" gallery_on_listings="no"]
  </div>

replace the CSS class name "my-right" with "summary entry-summary", like this:

  <div class="summary entry-summary">
...
  </div>

As I can see, there is a problem in your website, the shortcode [wpv-post-excerpt] does not return the post excerpt content, but return the post body content, it is abnormal, which I can not duplicate same problem, see the test site:
hidden link

I suggest you contact your theme author for it.

Since almost of all your question is custom CSS codes problem, and woocommerce problem, I suggest you read some document as I mentioned above.

If you have new questions, please create new thread for it. this will help other user to find the answers, thanks

#386833

I am watching CSS tutorial videos, and now I have basic understanding of what the tags, properties, classes do. One thing I don't understand from the codes you gave me is, there are many div class names wrapping the shortcodes, but there are no corresponding parts in the CSS section. So where are those classes being styled? (because with these codes the contents are fitting in the middle and isn't it part of styling, thus some CSS work?) The fact that these are my theme classes, does it mean that you can just wrap the shortcodes with div and the styling is done without any content in CSS section?

#387293

Q1) So where are those classes being styled?
Some CSS class name are from your theme files, for example:
class="product-image"
class="summary entry-summary"
As I mentioned above you can contact your theme author for it
Some are new CSS class name, for example:
class="product-details"
Then you can use them to apply your own custom CSS codes

Q2) The fact that these are my theme classes, does it mean that you can just wrap the shortcodes with div and the styling is done without any content in CSS section?
Yes, you are right, and according to our new
https://toolset.com/toolset-support-policy/
We do not provide custom codes in the support, you can contact our certified partners for it.

The forum ‘Types Community Support’ is closed to new topics and replies.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.