Unable to style placeholder for textarea/WooCommerce card & checkout styling

Hi there,

I was wondering if I’m able to style the placeholder text for textarea in the Contact 7 Form? The styling shows up on the text tag’s placeholder text but not the textarea’s.

Also, I’m trying to style the cart pages (like fonts, button colours, text colours, input field appearance, placeholder text appearance) but I’m unable to find out how. Can you point me in the right direction?

Thanks!

Hi Natasha,

Thanks for reaching out.
You can style the placeholder using the custom CSS code, I would suggest you go through the following article on how you can style the placeholder.

Regarding styling the Cart and Checkout page, I would suggest you use the Layout Builder and create a separate Layout and style and assign it to the respective pages. Please go through the following article on how to use the Layout Builder.


Hope it helps.
Thanks

Well, I already had done this using the suggested code in the article. However, the problem is that this code did not work with the textarea placeholder in the ‘Message’ box, thus this topic, and I was not able to find a solution.

I’ve watched this tutorial in the past multiple times but I’m not sure how or where this applies to the cart or checkout pages? Or where I can style the looks of these pages? The WooCommerce cart and checkpage pages are not mentioned in these tutorials or videos, only product pages. As a result, I’m pretty confused over how this applies to cart/checkout. I’m obviously missing something so, unfortunately, I need some guidance with this.

Thanks,

Natasha

Hi Natasha,

I have checked the code specified in the example link, and it worked with the Textarea too. Please find the screenshot below.

Please remember that the code in the reference URL will work if copied as it is and doesn’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

And if you use the WC Single layout you can find the predefined template for the Cart and the Checkout page.

Hope it helps.
Thanks

Yes, I did this. I’m afraid that I still see no change on the page and I tried with several browsers. I’m not sure what’s going on.

Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thank you for the help. However, I’d like to offer the feedback that perhaps something like styling a form should be offered with Pro. Before purchase, I was assured I could easily customize the appearance of these kinds of elements without coding knowledge and would receive support for this. Considering the amount of CSS knowledge required to style various things, some of which I’d consider on the more basic end (ie. getting rid of a box shadow around a thumbnail)… well, I’m a bit disappointed because it doesn’t really line up with what was advertised to me when I was in contact with your sales department.

And if you use the WC Single layout you can find the predefined template for the Cart and the Checkout page.

Thank-you for this. However, I’ve done this but I’m afraid I still don’t see how or where to style the default elements that come with these templates (ie. notification appearances/borders/buttons/fonts). I see where I can lay out the title, where I can change up the body text, and the basic layout but that’s really it.

Hi Natasha,

It seems that the code in the reference URL is not been copied and pasted properly, I would suggest you paste the code into the Theme Options > CSS and check if that is working. If that does not work even after you added the code, we need to investigate it further.
I would suggest you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

I would also suggest you go through our online documentation where you can find the details on how you can use the pre-defined elements and change the styles using the settings.

Thanks

It seems that the code in the reference URL is not been copied and pasted properly, I would suggest you paste the code into the Theme Options > CSS and check if that is working. If that does not work even after you added the code, we need to investigate it further.

Thank you again for your help.

However, I have done this and did do this before posting to ask for help. I’ve also searched this forum and it doesn’t seem like I’m the only one who has this issue.

I’ve provided the login info in a secure note.

I would also suggest you go through our online documentation where you can find the details on how you can use the pre-defined elements and change the styles using the settings.

Please don’t do this. One of the most frustrating aspects about coming to the forum for help are answers like this.

If I could find the answers in the online documentation, I would not have posted this. If I am missing something, please point it out to me – specifically. A vague answer like this is not helpful. Additionally, I searched other topics covering this. For example, I don’t know how to change the styling of the following:

The dividers, removal icon, and input box in these screencap for the checkout process:

The coupon alert (or error notices) as seen in this screencap:

One can only change the button styling in Theme Options as far as I’ve been able to find. Again, if I am missing something, please point it out to me. That’s why I am here. Perhaps I should also ask if it is it possible to change these elements in the first place?

Thank-you again.

Hello Natasha,

We apologize for the confusion.

With the Layout Builder, you only have access to some elements on the page to create a custom layout of the cart page.

The dividers, removal icon, and input box, etc. are coming from the WooCommerce shortcode [woocommerce_cart] which displays the cart. If you want to apply custom styles to the elements you see in the cart, you will have to do it manually by adding custom CSS. Be advised that custom CSS coding is beyond the scope of our support. We only cover getting your site set up, bug fixes and minor cosmetic changes.

Thank you for your understanding.

Given your response, I am a bit disappointed by what I was told by your sales team as they assured I’d have access to styling all of these elements and help with styling all of these elements. I do feel kind of misled by this.

I’m also somewhat frustrated by the notion that I must be copying and pasting the selected code wrong and that is the reason why it is not working. Perhaps I am – but I can’t see what I’m doing wrong. I’m following the given directions. Above, @tristup said he’d need to investigate if I was still unable to get the above code to work. However, that no longer seems to be the case anymore because now you say you do not provide support for this.

I feel like I’m getting many mixed messages.

Hello Natasha,

Please understand that when you integrate WooCommerce with the theme, there are parts of WooCommerce that the theme or builders have control over it. Just like what we have in the Cart or Checkout page where you need to insert a WooCommerce shortcode [woocommerce_cart] or [woocommerce_checkout] to be able to display the WooCommerce cart or check out page. Anythings that are generated by WooCommerce to display, the theme or builders cannot be used to edit it. All the theme can do is to provide a global styling and default layout which is why in Cornerstone > Theme Options, we have the dedicated WooCommerce option. Now, if you want to customize the default styling of each stack, you will have to manually add your own custom CSS to be able to do so. You can check out the different styling for each stack here:

Hope this helps.

All I wanted to do was to change the styling of the coupon notice, error notices, dividers, and the form appearance. If I’m understanding you correctly, I have to restyle an entire stack to do this?

Additionally, in my efforts to try and style the WooCommerce elements with CSS myself referencing third party links, the rollover ‘Add to Cart’ buttons disappeared from the product pages showing product thumbnails. I’m not sure if these are related but I am unable to find the issue. I checked the buttons under Theme Options but nothing has been made transparent. What I wanted to do was to style the buttons that appear when product thumbnails are hovered over. Do you have an idea of what the issue is?

Thank-you.

And now I’ve got this going on.

There have been no customizations made or new plugins added. All that has been done is I’ve upgraded to OS Monterey but that shouldn’t have anything to do with a WordPress theme. I have no idea what’s going on.

Hi Natasha,

The Notices are the predefined element that has the predefined styled. To override the style you required customization which is outside the scope of Theme Support. I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Regarding the issue with the Page Builder, I found that the pages are loading perfectly fine and showing the content too. I have also found that you are still using the older version of the theme i.e. *4.3.3, I would suggest you update it to the latest version i.e. 5.1.4.

Hope it helps.
Thanks

Thanks for your reply but given the misleading answers and pitch I was given by your sales team when I was looking at Pro, I think I’ll pass on One. Prior to my purchase of Pro, I was told I could style these elements that I am now being advised to hire a developer for help with and I hardly have the money to do that. Customization of all these elements is a major reason why I purchased pro. I’m dubious I will purchase anything from Themeco again, much less another product I’m not intimately familiar with re: what can be done and what can’t be done. I am fine that stylization of the discussed elements can’t be done within the features of this theme. However, I’d like to be aware of this before purchase and I would not like to be treated like I’m doing something wrong when the suggested code offered by support doesn’t work (ie. “you must be copying and pasting the code wrong”, “you need to read our documentation to find the answer to your question”, etc.).

Is there a reason why the rollover buttons on my product thumbnails are not showing anymore? I deleted the custom CSS code and it was still an issue.

Thanks.

Hi Natasha,

The Pro is easily customizable, but it has a certain limitation of that. The Notice you are talking about is the WooCommerce element and the styles are made through that, and we can’t override those. To override that, you need the customization and that is what I referred to. If you are proficient in CSS, you can do it on your own without hiring any developer or availing of any other plan. Our documentation is also very helpful, where you can find a way to customize the predefined elements.

And the issue you are having with Rollover Buttonis very difficult to recognize without investigating it. I would suggest you share the page URL where you are having this issue.

Thanks

The Pro is easily customizable, but it has a certain limitation of that.

Yes, and I was not informed of these limitations. I was assured these forms and their appearances would be easily customizable.

The Notice you are talking about is the WooCommerce element and the styles are made through that, and we can’t override those.

I wish I had known this prior to purchase.

Our documentation is also very helpful, where you can find a way to customize the predefined elements.

It is helpful for some things but it does not contain the answers to the questions I have asked throughout this thread, questions I was told to look in the documentation for. That is my issue.

Thanks for investigating the issue. I will share the URL in a secure note. Thanks.

Hi Natasha,

I have checked the given URL and found that the Layout assigned to these Categories does not have the Add to Cart button in it.

I would suggest you add the Add to Cart button and use the Effect Module for the Rollover effect. I have created a Test page and added an Add to Cart button with some interaction effect, you can check the URL and replicate the same into your Layout.

Hope it helps.
Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.