Woocommerce product page css

[sima3110]

Hi Sweetdate team,

I encountered 2 CSS issue in my /product page. I am not sure if it is the theme or woocommerce.

As showed in this attached demo picture:
1. I added an attribute for each of my product, but it is squeezed to top of the blue rectangular, instead of align with the blue one;
2. The arrows for changing quantity are quit tiny, where they do not match with the frame around them.

Is there anyway to adjust them so they could look better?

Thank you and I am looking forward for your suggestions.

Best,
Sima

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, could you share a link to that page? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[sima3110]

Hi Laura,

Thanks for replying.

Here is the link: http://www.italktalk.com/product/tutor2/

[sima3110]

Hi @Laura,

Hope you are doing well!

How is the checking going? Do you need anything else from me to figure out the issue? Please let me know if there is anything I could do.

Thanks,

Sima

[Laura]

Hello, FTP credentials would be helpful 🙂 Thanks

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[sima3110]

This reply has been set as private.

[Laura]

Hello, that is wp-admin account, it would be better with ftp can you share it? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[sima3110]

Hi Laura,

I am working on it. Will give it to you asap.

Thanks for helping.

Best,
Sima

[Laura]

Hello, ok 🙂 will be waiting, thanks

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[sima3110]

This reply has been set as private.

[Laura]

Hello, i’m sorry i cannot log in to ftp, please check out if you have to whitelist my ip or the ftp host is not your ip, or if its sftp

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[sima3110]

Hi Laura,

I am sorry that you couldn’t log on.

We didn’t set any constrains on ftp log on. But we’ve been experiencing unstable server hosting. We just checked with ftp log on, which failed too. I guess that’s the reason.

We have restarted the server, which should be working fine now. But just to make sure, how about we schedule a time slot, and I will restart the server before you log on.

I will usually start working at 8am PST, please kindly let me know when is your convenient working hours so we could work this out.

Thanks a lot!

Best,
Sima

[Laura]

Hello, i work around 9AM GMT+1 to 4PM GMT+1 or later
i tried again but couldnt login

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[sima3110]

Hi Laura,

I just tested and it worked. Not sure what went wrong here. I will ask my team to double check again. But they will be working after my working ours.

Will go back to you asap.

[sima3110]

Hi Laura,

We tested again, and the ftp worked fine. What is your error message, would you be able to give us a screenshot of it so that we could know it better?

Best,
Sima

[sima3110]

This reply has been set as private.

[sima3110]

This reply has been set as private.

[sima3110]

Hi @Laura,

Hope you are doing well.

How is the ftp thing going? Can you login now? I just found another issue related to Woocommer CSS while trying to add product description for some products. So there was a large fixed “Product Description” in the product description content area added right on top of my description content. Once I delete my content, that “Product Description” disappears as well. Attached is the picture to show it.

If it is written somewhere in the code, lease kindly guide me on the path and the file of modifying it, and I will ask my team to change the code.

Thank you and have a nice day!

Best,
Sima

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, i’m sorry i couldnt login, i do not know if its a problem here, but well i will try to guide you so we can fix your issue 🙂

This is a css code i created, please add this to quick css or style.css in child theme

COPY CODE

.variations .label {
  background: none !important;
}

About product description, do you want to delete it or change it?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[sima3110]

Hi @Laura,

Thanks for your CSS code. I applied it.

1. Now the deleted the blue block, but there is still a solid line, which I will highlight in the attached picture.

2. The variation (“session length” on my page) is very small on the page and also does not align with the chose box after it, how could I change it to look better?

3. There used to be small arrows in the quantity box to adjust the product units, but after I updated the woocommerce yesterday, it disappeared now. Is there anyway to get it back and a adjust it to align with the box around them? Will highlight in the picture too.

4. Regarding the product description, I would like to delete it. But if it is possible, please kindly let me know how to change it just in case.

Thanks again and wish you a nice day!

Best,
Sima

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, please try
Nº1 & Nº2

COPY CODE

table tr td.label {
  border-right: none !important;
}
.variations label {
  margin-top: 12%;
}

Nº3: This has been deleted from Woocommerce it seems, now is a text box

Nº4 Hide Product Description

COPY CODE

.panel .entry-content h2 {
  display: none;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[sima3110]

Hi @Laura,

Thank you for the new codes.

I applied them all, but seems like No.2, the margin-top code is partially working; and No.4, the panel entry-content h2 is not working at all.

I tested with both Google Chrome and Firefox.
For No.2: With chrome, it appeared to be even lower, while with Firefox, it looks somehow ok. Besides, the arrows to adjust quantity are still there for Firefox.
For No.4: None of the browsers worked with the code above, I added “!important” too, but it didn’t work.

Please kindly help me, it’s been 2 weeks since I encountered these issues on product page, and I haven’t been able to fix them, it is quite frustrating.

I really appreciate your time.

Best,
Sima

[Laura]

Hello, thanks for your patience, i’m going to check it out asap and let you know 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Laura]

Hello, please try the following:

COPY CODE

.variations a.selector {
  margin-top: 18px;
}
.variations .value .custom.dropdown {
  padding-top: 18px;
}
.woocommerce .variations_form .variations .reset_variations {
  margin-top: 18px;
}
.variations label {
  padding-right: 5px;
}
input, textarea, keygen, select, button {
  margin: 0em;
  font: normal normal normal 13.3333330154419px/normal Arial;
  text-rendering: auto;
  color: initial;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
}
div#tab-description h2 {
  display: none !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[sima3110]

Hi @Laura,

Thank you again for the new code.

I applied it right away, and No.4 was solved perfectly.

For No.2, the alignment seems more off than before. Both Chrome and FireFox gave me similar result. Here I attached the screen shot for you. Please kindly take a look.

Thank you and wish you a wonderful weekend!

Best,
Sima

[sima3110]

uhh, the sreenshot was not attached somehow again. Sorry about that.

Attachments:

You must be logged in to view attached files.

[Andrei]

Hi @sima3110, we’ll give a look a little bit deeply into this issue and fix it asap.
I’ll get back to you as soon as we manage to have a fully working fix for it.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Robert]

Hi @sima3110, we’ve fixed these alignment inconsistency and it looks like this: http://seventhqueen.com/public-files/robert/Woo_Single_2__Sweet_Date_2015-05-11_14-40-13.png

It will be available in our next update.

Thank you for your waiting time.

Best regards,
Robert

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Robert - Front-end developer and UI graphics enthusiast.

[sima3110]

Hi @Robert,

Thank you for the help.
I’ve been travelling abroad and just got back. Sorry for the late reply. I will check my page with the new update.

Best,
Sima

[Author]

Posts