Shipping calculator visibility fix

Shipping costs will be calculated once you have provided your address.

Calculate shipping

Select a country…
United Kingdom (UK)

Update totals

for the first time I want to show it open always !
with iportant , i'm unable to do this , if I'm adding important to block a=then its not closing !

so whant can we do in this case?

### ✅ The Best Solution:
Instead of forcing it open via CSS with `!important`, **modify the HTML structure or JavaScript initialization logic** to make it open by default **once**, and still allow toggling afterward.

—

### 🔧 Step-by-step Fix:

#### ✅ 1. Remove `style="display: none;"` from “

Change this:

<section class="shipping-calculator-form" style="display: none;">

To this:

<section class="shipping-calculator-form">

#### ✅ 2. Make sure the toggle button respects the open state

If you have JavaScript handling this toggle via `.shipping-calculator-button`, it likely toggles the `section.shipping-calculator-form` visibility and updates the `aria-expanded` attribute.

So you should update the initial button's `aria-expanded="true"` (✅ already correct in your case), and make sure your JS checks for that.

—

### 🧠 Bonus (Optional Enhancement in JS):

If WooCommerce’s JavaScript uses a `.click()` handler like this:

$('.shipping-calculator-button').on('click', function(e){
  e.preventDefault();
  var $section = $(this).closest('form').find('.shipping-calculator-form');
  $section.slideToggle(400);
});

Then you **do not need** to set `display: none;` in HTML or override it in CSS.

—

### 🛑 Don't Use `!important` Here

Using `!important` for `display: block`:

.shipping-calculator-form {
  display: block !important;
}

…will **break the toggle**, so **do not use this unless** you are *never allowing it to close*.

—

### ✅ Final Summary:

– ❌ **Do not** force `display: block !important;` unless you want it **always open** and non-toggleable.
– ✅ Just **remove** the inline `style="display: none;"` in the HTML.
– ✅ JavaScript will now still be able to toggle it open/closed.

Let me know if you want to modify the JS as well to enhance the toggle logic!

Here's the correct and clean way to do this ✅

—

### ✅ Step 1: REMOVE `style="display: none;"` from the “

Update this:

<section class="shipping-calculator-form" style="display: none;">

To this:

<section class="shipping-calculator-form">

This makes the form **visible by default**.

—

### ✅ Step 2: Ensure the toggle button has correct `aria-expanded` state

You already have:

<a href="#" class="shipping-calculator-button" aria-expanded="true">Calculate shipping</a>

Perfect! That matches the default visible state.

—

### ✅ Step 3: OPTIONAL (If JavaScript Is Toggling Based on Visibility or `aria-expanded`)

WooCommerce’s JS likely toggles using this:

$('.shipping-calculator-button').on('click', function(e) {
  e.preventDefault();
  var $section = $(this).closest('form').find('.shipping-calculator-form');
  $section.slideToggle(400);

  // Toggle aria-expanded attribute
  var isExpanded = $(this).attr('aria-expanded') === 'true';
  $(this).attr('aria-expanded', !isExpanded);
});

**You're done if the above logic is already there.**

—

### ❌ DO NOT use this:

.shipping-calculator-form {
  display: block !important;
}

Because that will prevent `slideToggle()` from working.

—

### ✅ Final HTML should look like this:

<p><a href="#" class="shipping-calculator-button" aria-expanded="true">Calculate shipping</a></p>

<section class="shipping-calculator-form">
  <p class="form-row form-row-wide">
    <select name="calc_shipping_country">
      <option value="">Select a country…</option>
      <option value="GB" selected="selected">United Kingdom (UK)</option>
    </select>
  </p>
  <!-- More fields -->
  <p><button type="submit" name="calc_shipping" value="1" class="button">Update totals</button></p>
</section>

—

Let me know if you want to **completely disable the toggle** or modify the animation behavior.

—

### 🔍 But Here’s the Key Point:

Just setting `aria-expanded="true"` **does not make the form visible** by itself. It’s purely for accessibility and JavaScript logic. So:

—

### ✅ To Show the Shipping Calculator Form by Default AND Keep Toggle

BUT ITS ALREADY THERE !

WooCommerce adds this `style="display: none;"` via PHP **at render time**, even if `aria-expanded` is `true`.

—

### ✅ SOLUTION: Remove the inline `style="display: none;"` using JavaScript on page load

Since you **can’t change WooCommerce core**, you can override this behavior cleanly with JavaScript.

—

### ✅ Add This JavaScript:

document.addEventListener('DOMContentLoaded', function () {
  const section = document.querySelector('.shipping-calculator-form');
  const button = document.querySelector('.shipping-calculator-button');

  if (section && button) {
    section.style.display = 'block'; // Show the form initially
    button.setAttribute('aria-expanded', 'true'); // Set aria correctly
  }
});

> You can enqueue this via your theme’s `functions.php` or add it to a custom JS file loaded on the cart page.

—

### ✅ Why This Works:
– It **removes the default `display: none;`** added inline by WooCommerce.
– Keeps full compatibility with WooCommerce's `slideToggle()` function.
– Keeps the `aria-expanded="true"` in sync.

—

### ✅ Optional jQuery Version (If you're already using jQuery):

jQuery(function($) {
  $('.shipping-calculator-form').show();
  $('.shipping-calculator-button').attr('aria-expanded', 'true');
});

—

Let me know if you want help injecting this code via theme or plugin – I’ll guide you!

<style>
/* Shows the same border style.cssas on front end */
            #headimg {
                border-bottom: 1px solid #000;
                border-top: 4px solid #000;
            }
</style>

<style>
(.*?)
</style>

#s", '', $css);
}

// Backwards compatibility with WordPress 3.0.
if (version_compare($GLOBALS['wp_version'], '3.1', '

<script>
jQuery(function ($) {
                $('form.cart').closest('.buttons_added').addClass('buttonsCus');
                // Update quantity on 'a.button' in 'data-quantity' attribute (for ajax)
                $('form.cart').on('change', 'input.qty', function () {
                    if ($(this).val() === '0')
                        $(this).val('1');
                    $(this).closest('form.cart').find('a.add_to_cart_button').attr('data-quantity', $(this).val());
                });
            });
</script>

<script>
jQuery(document).ready(function () {
                jQuery('#calc_shipping_postcode').tooltip({
                    'trigger': 'focus',
                    'position': "top left",
                    'title': 'Please enter the correct shipping postcode to enable the checkout button.'
                });
                setTimeout(function () {
                    jQuery('#calc_shipping_postcode').focus();
                }, 1000);
            });
</script>

Call For Price

<script>
fbq('track', 'Purchase', {
            value: 1,
            currency: 'GBP',
        });
</script>

Since you asked **"Is there any mistake?"**, here's a **focused audit** for **potential issues, bugs, and improvements** rather than a line-by-line rewrite:

—

### ✅ 1. **Your Original Problem (Shipping Form Always Open)**
**✅ SOLUTION:** You're not using JavaScript to remove `style="display: none;"` from `.shipping-calculator-form`.

**👉 ADD THIS at the end of your theme (`wp_footer`)**:

add_action('wp_footer', function() {
    if (is_cart()) {
        ?>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const form = document.querySelector('.shipping-calculator-form');
                const btn = document.querySelector('.shipping-calculator-button');
                if (form) {
                    form.style.display = 'block';
                }
                if (btn) {
                    btn.setAttribute('aria-expanded', 'true');
                }
            });
        </script>
        <?php
    }
});

—

### ❌ 2. **Mistakes / Issues in Your Code**

#### ❌ a. Invalid function definition:

function getCategoryDepot($term_object = object) {

**🚫 This is not valid PHP syntax.**

✅ Fix:

function getCategoryDepot($term_object) {

—

#### ❌ b. Broken line in `twentyten_setup`:

*/style.css

**🚫 Typo — this line looks like a mistake.**

✅ Remove or correct it.

—

#### ❌ c. Typo in `load_theme_textdomain`:

load_theme_textdomain('twentyten', get_templstyle.cssate_directory() . '/languages');

**🚫 `get_templstyle.cssate_directory()` is invalid.**

✅ Fix:

load_theme_textdomain('twentyten', get_template_directory() . '/languages');

—

#### ❌ d. Enqueueing an already registered jQuery:

wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', array(), '1.11.2', false);

**🚫 WordPress ships with jQuery. Re-registering like this can break other plugins.**

✅ Remove that line unless you have a strong reason.

—

#### ❌ e. Unused `style.css` lines at odd places (e.g. `*/style.css`, `style.css` alone)

These seem like **accidental comments or paste mistakes**. They should be removed.

—

#### ❌ f. Using `session_start()` without proper guards

You're doing:

if (session_id() === '') {
    session_start();
}

While this is generally OK, in **WordPress it's better to hook early (e.g., `init`)** and ensure `session_start()` isn't called multiple times. Consider wrapping with a constant to avoid double-starting if plugins also use sessions.

—

### ✅ 3. Best Practice Suggestions

– Use **`wp_enqueue_script()`** instead of manually registering and enqueuing.
– Cache or sanitize user inputs before saving them to the session or database.
– Split this huge `functions.php` into separate PHP files for better maintainability (`includes/cart-functions.php`, `includes/theme-setup.php`, etc.).
– Use **action hooks** for custom JS like you did in `wp_footer` — it's clean.

—

### ✅ Summary

| Check | Area | Status |
|——|——|——–|
| ✅ | Shipping form show by default | Fixed via JS in `wp_footer` |
| ❌ | Invalid function argument (`object`) | Fix needed |
| ❌ | Typo in `load_theme_textdomain` | Fix needed |
| ❌ | jQuery re-registering | Remove |
| ❌ | Unnecessary `style.css` comments | Clean up |
| ✅ | WooCommerce customization | Generally looks fine |
| ✅ | Ajax/session handling | Works, but refactor later if needed |

—

Would you like me to **refactor** this code into smaller reusable files or just give you a cleaned-up version of `functions.php`?

its added and importnt removed , now what can we do ito fix it?

– ✅ Added `aria-expanded="true"`
– ✅ Removed `!important` from `display: block`
– ❌ But the form is still **not showing by default** (WooCommerce is adding `style="display: none;"`)

### ✅ Fix it cleanly with JavaScript in your theme (not CSS)

Add the following JavaScript using `wp_footer` hook. This ensures it runs **after WooCommerce’s JavaScript and HTML render**.

—

### ✅ Add to your theme’s `functions.php`:

add_action('wp_footer', 'force_shipping_calculator_open');
function force_shipping_calculator_open() {
    if (is_cart()) {
        ?>
        <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.querySelector('.shipping-calculator-form');
            const button = document.querySelector('.shipping-calculator-button');

            if (form) {
                form.style.display = 'block'; // Show it
            }
            if (button) {
                button.setAttribute('aria-expanded', 'true');
            }
        });
        </script>
        <?php
    }
}

—

### ✅ Why this works:

– It runs **after WooCommerce inserts `style="display: none;"`**.
– It sets the form to **`display: block`** at runtime.
– It keeps the toggle behavior working (so the button can still close/open it).
– No need for `!important`, which would break toggle.

—

### ✅ Final HTML output looks like:

<a href="#" class="shipping-calculator-button" aria-expanded="true">Calculate shipping</a>
<section class="shipping-calculator-form" style="display: block;">

And WooCommerce's toggle JS continues to work perfectly.

—

Let me know if you want this conditionally loaded only when shipping isn’t calculated, or for certain countries.

this is coming ffrom a plugin , I cannt do anything , in it could you fix it from js only !?

—

### ✅ SOLUTION: Override the inline `style="display: none;"` using JS — no `!important`, no plugin edits

Add this JavaScript **in your theme** (either inline in `footer.php`, via `wp_footer`, or enqueue a JS file):

### ✅ JS Only Fix (with Toggle Compatibility):

document.addEventListener('DOMContentLoaded', function () {
  const form = document.querySelector('.shipping-calculator-form');
  const button = document.querySelector('.shipping-calculator-button');

  if (form && form.style.display === 'none') {
    form.style.display = 'block'; // force visible
  }

  if (button) {
    button.setAttribute('aria-expanded', 'true');
  }
});

—

### ✅ Optional jQuery Version (if jQuery is available):

jQuery(function($) {
  const $form = $('.shipping-calculator-form');
  const $button = $('.shipping-calculator-button');

  if ($form.length && $form.css('display') === 'none') {
    $form.show(); // override the inline style
  }

  if ($button.length) {
    $button.attr('aria-expanded', 'true');
  }
});

—

### ✅ How to Include This in WordPress

Add this in your `functions.php`:

add_action('wp_footer', function () {
    if (is_cart()) {
        ?>
        <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.querySelector('.shipping-calculator-form');
            const button = document.querySelector('.shipping-calculator-button');

            if (form && form.style.display === 'none') {
                form.style.display = 'block';
            }

            if (button) {
                button.setAttribute('aria-expanded', 'true');
            }
        });
        </script>
        <?php
    }
});

—

### ✅ Summary:

– ✔️ Forces `.shipping-calculator-form` to show on initial load
– ✔️ Keeps toggle working if WooCommerce JavaScript is in use
– ❌ No need to edit plugin or template files
– ❌ No need to use `!important`

Let me know if you want to auto-scroll to the form when it's shown or style the button differently when opened.

### 💡 WooCommerce’s JavaScript is re-hiding the form **after** your JS runs.

So we need to **wait for WooCommerce JS to finish** — then override it.

—

### ✅ Bulletproof Fix: Use `setTimeout` to override after WooCommerce

WooCommerce toggles the shipping calculator **after DOMContentLoaded**, so we delay your override slightly.

Add this in `wp_footer`:

add_action('wp_footer', function () {
    if (is_cart()) {
        ?>
        <script>
        document.addEventListener('DOMContentLoaded', function () {
            setTimeout(function () {
                const form = document.querySelector('.shipping-calculator-form');
                const button = document.querySelector('.shipping-calculator-button');

                if (form) {
                    form.style.display = 'block';
                }

                if (button) {
                    button.setAttribute('aria-expanded', 'true');
                }
            }, 500); // Delay by 500ms to let Woo re-hide it, then show it again
        });
        </script>
        <?php
    }
});

—

### ✅ Explanation:

– `DOMContentLoaded` fires → WooCommerce attaches toggle handlers
– Woo re-applies `display: none;` shortly after
– `setTimeout(…, 500)` gives WooCommerce time to finish
– Then **we re-show** the form with JS

—

### ⏱ Want it faster?

You can try reducing the delay from `500` to `300` ms if you want — but `500` is safest across themes.

—

Let me know if you'd like to **detect if the form is already calculated** and skip opening, or if you'd like to **auto-scroll** to the shipping section after it's opened.

—

### ✅ What This Does:
– Forces `.shipping-calculator-form` to stay **open on page load**.
– Works **even if WooCommerce re-hides it**.
– **Keeps the toggle button functional** (you can still open/close it).

—

### ✅ Step-by-Step Implementation

#### 1. **Paste this in your `functions.php`**:

add_action('wp_footer', function () {
    if (is_cart()) {
        ?>
        <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Delay to wait for WooCommerce JS to possibly re-hide the form
            setTimeout(function () {
                const form = document.querySelector('.shipping-calculator-form');
                const button = document.querySelector('.shipping-calculator-button');

                if (form) {
                    form.style.display = 'block'; // Force it to stay open
                }

                if (button) {
                    button.setAttribute('aria-expanded', 'true'); // Keep toggle state correct
                }
            }, 500); // Delay to override WooCommerce's own JS
        });
        </script>
        <?php
    }
});

—

### ✅ Notes:

– This targets the cart page only: `if (is_cart())`
– `setTimeout(…, 500)` ensures it runs **after WooCommerce’s script finishes**
– Toggle behavior (open/close on click) remains intact

—

### ✅ No other edits needed

– ❌ Don't add `!important` CSS
– ❌ Don’t edit WooCommerce plugin templates
– ❌ Don’t touch inline styles — JS handles everything

—

Let me know if you also want to auto-scroll to this section or highlight it visually!