OceanWP Woocommerce Color Settings

Some common OceanWP settings for Woocommerce buttons for product and archive pages.

OceanWP Woocommerce general button colors.
Go to General Options/Theme Buttons

To Change Colors of Related Products :Add to Cart button; at bottom of indiv. products pages

Woocommerce/Advanced Styling
Scroll to Product Entry: Add To Cart

Woocommerce Description Tab colors on Product Pages
Woocommerce/Advanced Styling
Scroll to Single Product: Tabs (last 1/3 of scroll)

Elementor Error when Editing

Make sure to try turning shop page to draft, or change shop page temporarily to another page in Woocommerce. Edit in Elementor, then change page back to main store page or even try leaving that setting blank. Woocommerce/Products/Shop page.

Continue ReadingOceanWP Woocommerce Color Settings

Force Elementor Pro Button Colours

Using OceanWP and Elementor Pro I added a popup button in the footer widget area. Even after turning off theme control over Elementor colors in Elementor>Settings>Disable Default Colors, the text colours were not correct.

Here is what I did to over ride any color settings other plugins may be inserting.

This may be a bit sloppy but put this in the OceanWP Custom CSS/JS section.
/* Footer Link Colours */
a.elementor-button-link.elementor-button.elementor-size-sm {color:#ffffff !important}
a.elementor-button-link.elementor-button.elementor-size-sm:hover {color:#282828 !important}

UPDATE

Well, it looks like I found the problem. Uploading some of the OceanWP Pro templates inserts CSS into the Customizer.

Found this when I scrolled up the Custom CSS/JS section so look in the CSS section if you’re experiencing color wonkiness.

/* Footer */
#footer-widgets .footer-box { text-align: center; }
#footer-widgets .social-widget .style-light li a, #footer-widgets .social-widget .style-dark li a,
#footer-widgets .social-widget .style-colored li a { background-color: #263036; color: #708e9f; border-color: #263036; width: 40px; height: 40px; line-height: 40px; }
#footer-widgets .social-widget .style-light li a:hover, #footer-widgets .social-widget .style-dark li a:hover,
#footer-widgets .social-widget .style-colored li a:hover { background-color: #0eb290; color: #fff !important; border-color: #0eb290 !important; }

Continue ReadingForce Elementor Pro Button Colours