Woocommerce product page css

This topic has 28 replies, 4 voices, and was last updated 9 years by sima3110.

Author

Tagged: woocommerce
April 8, 2015 at 07:30 #53638

sima3110
Participant

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.

April 9, 2015 at 07:39 #53746

Laura
Moderator

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 🙂

April 9, 2015 at 07:40 #53747

sima3110
Participant

Hi Laura,

Thanks for replying.

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

April 11, 2015 at 00:51 #53979

sima3110
Participant

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

April 13, 2015 at 16:16 #54196

Laura
Moderator

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 🙂

April 13, 2015 at 23:18 #54287

sima3110
Participant

This reply has been set as private.

April 15, 2015 at 16:04 #54578

Laura
Moderator

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 🙂

April 16, 2015 at 05:40 #54746

sima3110
Participant

Hi Laura,

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

Thanks for helping.

Best,
Sima

April 16, 2015 at 12:38 #54762

Laura
Moderator

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 🙂

April 17, 2015 at 04:10 #54897

sima3110
Participant

This reply has been set as private.

April 17, 2015 at 11:04 #54918

Laura
Moderator

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 🙂

April 20, 2015 at 04:48 #55181

sima3110
Participant

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

April 20, 2015 at 10:27 #55214

Laura
Moderator

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 🙂

April 20, 2015 at 19:57 #55287

sima3110
Participant

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.

April 21, 2015 at 05:52 #55337

sima3110
Participant

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

April 21, 2015 at 06:01 #55338

sima3110
Participant

This reply has been set as private.

April 21, 2015 at 06:16 #55339

sima3110
Participant

This reply has been set as private.

April 22, 2015 at 03:22 #55532

sima3110
Participant

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.
April 22, 2015 at 12:08 #55564

Laura
Moderator
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 🙂
April 23, 2015 at 00:37 #55736

sima3110
Participant

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.
April 24, 2015 at 13:45 #56051

Laura
Moderator
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 🙂
April 27, 2015 at 23:18 #56314

sima3110
Participant

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

April 30, 2015 at 13:28 #56764

Laura
Moderator

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 🙂
April 30, 2015 at 13:43 #56766

Laura
Moderator
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 🙂
May 1, 2015 at 04:45 #56920

sima3110
Participant

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

May 1, 2015 at 04:46 #56921

sima3110
Participant

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

Attachments:
You must be logged in to view attached files.

May 8, 2015 at 03:37 #57901

Andrei
Moderator

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

May 11, 2015 at 14:42 #58342

Robert
Keymaster

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.

June 3, 2015 at 20:18 #60936

sima3110
Participant

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