Member Avatar for useruno1

hello daniweb community, I encounter a problem at my website with a wordpress + woocomerce platform, I've done an woocomerce update and unfortunately something happened with the CSS on the single product page.

This is my website:
(this is category) Works perfectly.
(Single product) Very bad CSS. (half screen view)

I beg you, if anyone knows what caused this problem and how can be solved, I would appreciate if can someone can help me with some ideas how to fix this issue. Cheers

edit: one more thing, this website was made by someone else, and someone he hide the "Ad to cart" button, i cant find the code line at all.

Edited by Dani because: Moved to correct forum
  • 1 Contributor
  • 1 Reply
  • 321 Views
  • 51 Minutes Discussion Span
  • Latest Post Latest Post by useruno1

Dani AI

Generated

As observed, the category listing looks correct while the single-product page is constrained to roughly half the screen. The fastest way to fix this is to (a) locate exactly which CSS rule is forcing the narrow width, and (b) determine whether the Add‑to‑Cart button is being removed in PHP or simply hidden with CSS. The notes below show a safe workflow and small fixes that can be applied from a child theme or the Customizer’s “Additional CSS.”

First, inspect the single product page with the browser’s DevTools: right‑click the main product wrapper, choose Inspect, then look at the Styles and Computed panes. The Styles pane will show the exact stylesheet and line that set a width/float/display rule. Use DevTools’ global search (Ctrl/Cmd+Shift+F) to search the theme and plugin CSS for the column class names mentioned earlier (for example the strings containing “column-”). Also check Appearance → Customize → Additional CSS and any caching/minified CSS the theme or a plugin generates.

If the problematic rule is coming from theme or plugin CSS and a quick update isn’t available, add a targeted override in the child theme or Additional CSS. Example override (safe to paste into Additional CSS):

/* single-product: neutralize theme column classes and force full width */
.single-product [class*="column-"] {
  width: auto !important;
  float: none !important;
  display: block !important;
}
.single-product .site-main,
.single-product .content-area {
  width: 100% !important;
  max-width: 100% !important;
}

For the missing Add‑to‑Cart: inspect the DOM. If the button exists but has display:none, the Styles pane will show which CSS file hid it. If the button is absent from the DOM, look for a remove_action in the theme’s functions.php or template overrides under the theme’s /woocommerce/ folder. Re‑adding the standard action from a child theme will restore it:

/* add to child-theme functions.php */
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

Finally: clear all caches (server, plugin, CDN, browser), test in an incognito window, and do changes on a staging site or child theme. If the Styles pane shows a CSS file served from a plugin (catalog-mode, page-builder, or a “custom css” plugin), disable that plugin temporarily to confirm the cause before editing code.

Member Avatar for useruno1

For the half screen layout (product-page)
I guess its: 

.column-1_3, .column-2_6, .column-3_9, .column-4_12 {
    /* width: 33.33333333%; */

But i have no idea where and what should i do.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.