Roots Discourse

Custom WooCommerce templates missing styling and JS

Hi,

Im struggling with getting customizing WooCommerce templates like the cart page. I’m using sage-woocommerce (https://github.com/roots/sage-woocommerce). I created the structure and custom template are getting picked up. However the styling and JS is missing.

My cart.blade.php is located in views/woocommerce/cart and looks like

{{--
 Cart Page
 
 This template can be overridden by copying it to yourtheme/woocommerce/cart/cart.php.
 
 HOWEVER, on occasion WooCommerce will need to update template files and you
 (the theme developer) will need to copy the new files to your theme to
 maintain compatibility. We try to do this as little as possible, but it does
 happen. When this occurs the version of the template file will be bumped and
 the readme will list any important changes.
 
 @see     https://docs.woocommerce.com/document/template-structure/
 @package WooCommerce/Templates
 @version 3.7.0
--}}

@extends('layouts.app')

@section('content')
  @php
    do_action( 'woocommerce_before_cart' );
  @endphp

  <form class="woocommerce-cart-form" action="@php echo esc_url( wc_get_cart_url() ); @endphp" method="post">
    @php
      do_action( 'woocommerce_before_cart_table' );
    @endphp

    <table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents" cellspacing="0">
      <thead>
        <tr>
          <th class="product-remove">&nbsp;</th>
          <th class="product-thumbnail">&nbsp;</th>
          <th class="product-name">@php esc_html_e( 'Product', 'woocommerce' ); @endphp</th>
          <th class="product-price">@php esc_html_e( 'Price', 'woocommerce' ); @endphp</th>
          <th class="product-quantity">@php esc_html_e( 'Quantity', 'woocommerce' ); @endphp</th>
          <th class="product-subtotal">@php esc_html_e( 'Total', 'woocommerce' ); @endphp</th>
        </tr>
      </thead>
      <tbody>
        @php
          do_action( 'woocommerce_before_cart_contents' );
        @endphp

        @foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item )
          @php $_product   = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key ) @endphp
          @php $product_id = apply_filters( 'woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key ) @endphp

          @if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_cart_item_visible', true, $cart_item, $cart_item_key ) )
            @php $product_permalink = apply_filters( 'woocommerce_cart_item_permalink', $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '', $cart_item, $cart_item_key ) @endphp

            <tr class="woocommerce-cart-form__cart-item @php echo esc_attr( apply_filters( 'woocommerce_cart_item_class', 'cart_item', $cart_item, $cart_item_key ) ) @endphp">

              <td class="product-remove">
                @php
                  echo apply_filters( // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
                    'woocommerce_cart_item_remove_link',
                    sprintf(
                      '<a href="%s" class="remove" aria-label="%s" data-product_id="%s" data-product_sku="%s">&times;</a>',
                      esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
                      esc_html__( 'Remove this item', 'woocommerce' ),
                      esc_attr( $product_id ),
                      esc_attr( $_product->get_sku() )
                    ),
                    $cart_item_key
                  );
                @endphp
              </td>

              <td class="product-thumbnail">
              @php
                $thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );

                if ( ! $product_permalink ) {
                  echo $thumbnail; // PHPCS: XSS ok.
                } else {
                  printf( '<a href="%s">%s</a>', esc_url( $product_permalink ), $thumbnail ); // PHPCS: XSS ok.
                }
              @endphp
              </td>

              <td class="product-name" data-title="@php esc_attr_e( 'Product', 'woocommerce' ); @endphp">
              @php
                if ( ! $product_permalink ) {
                  echo wp_kses_post( apply_filters( 'woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key ) . '&nbsp;' );
                } else {
                  echo wp_kses_post( apply_filters( 'woocommerce_cart_item_name', sprintf( '<a href="%s">%s</a>', esc_url( $product_permalink ), $_product->get_name() ), $cart_item, $cart_item_key ) );
                }

                do_action( 'woocommerce_after_cart_item_name', $cart_item, $cart_item_key );

                // Meta data.
                echo wc_get_formatted_cart_item_data( $cart_item ); // PHPCS: XSS ok.

                // Backorder notification.
                if ( $_product->backorders_require_notification() && $_product->is_on_backorder( $cart_item['quantity'] ) ) {
                  echo wp_kses_post( apply_filters( 'woocommerce_cart_item_backorder_notification', '<p class="backorder_notification">' . esc_html__( 'Available on backorder', 'woocommerce' ) . '</p>', $product_id ) );
                }
              @endphp
              </td>

              <td class="product-price" data-title="@php esc_attr_e( 'Price', 'woocommerce' ); @endphp">
                @php
                  echo apply_filters( 'woocommerce_cart_item_price', WC()->cart->get_product_price( $_product ), $cart_item, $cart_item_key ); // PHPCS: XSS ok.
                @endphp
              </td>

              <td class="product-quantity" data-title="@php esc_attr_e( 'Quantity', 'woocommerce' ); @endphp">
              @php
                if ( $_product->is_sold_individually() ) {
                  $product_quantity = sprintf( '1 <input type="hidden" name="cart[%s][qty]" value="1" />', $cart_item_key );
                } else {
                  $product_quantity = woocommerce_quantity_input(
                    array(
                      'input_name'   => "cart[{$cart_item_key}][qty]",
                      'input_value'  => $cart_item['quantity'],
                      'max_value'    => $_product->get_max_purchase_quantity(),
                      'min_value'    => '0',
                      'product_name' => $_product->get_name(),
                    ),
                    $_product,
                    false
                  );
                }

                echo apply_filters( 'woocommerce_cart_item_quantity', $product_quantity, $cart_item_key, $cart_item ); // PHPCS: XSS ok.
              @endphp
              </td>

              <td class="product-subtotal" data-title="@php esc_attr_e( 'Total', 'woocommerce' ) @endphp">
                @php
                  echo apply_filters( 'woocommerce_cart_item_subtotal', WC()->cart->get_product_subtotal( $_product, $cart_item['quantity'] ), $cart_item, $cart_item_key ); // PHPCS: XSS ok.
                @endphp
              </td>
            </tr>

          @endif
        @endforeach

        @php do_action( 'woocommerce_cart_contents' ) @endphp

        <tr>
          <td colspan="6" class="actions">

            @if( wc_coupons_enabled() )
              <div class="coupon">
                <label for="coupon_code">@php esc_html_e( 'Coupon:', 'woocommerce' ); @endphp</label> <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="@php esc_attr_e( 'Coupon code', 'woocommerce' ); @endphp" /> <button type="submit" class="button" name="apply_coupon" value="@php esc_attr_e( 'Apply coupon', 'woocommerce' ); @endphp">@php esc_attr_e( 'Apply coupon', 'woocommerce' ); @endphp</button>
                @php do_action( 'woocommerce_cart_coupon' ); @endphp
              </div>
            @endif

            <button type="submit" class="button" name="update_cart" value="@php esc_attr_e( 'Update cart', 'woocommerce' ); @endphp">@php esc_html_e( 'Update cart', 'woocommerce' ); @endphp</button>

            @php do_action( 'woocommerce_cart_actions' ); @endphp

            @php wp_nonce_field( 'woocommerce-cart', 'woocommerce-cart-nonce' ); @endphp
          </td>
        </tr>

        @php do_action( 'woocommerce_after_cart_contents' ); @endphp
      </tbody>
    </table>
    @php do_action( 'woocommerce_after_cart_table' ); @endphp
  </form>

  @php do_action( 'woocommerce_before_cart_collaterals' ) @endphp

  <div class="cart-collaterals">
    @php
      /**
       * Cart collaterals hook.
       *
       * @hooked woocommerce_cross_sell_display
       * @hooked woocommerce_cart_totals - 10
       */
      do_action( 'woocommerce_cart_collaterals' );
    @endphp
  </div>

  @php
    do_action( 'woocommerce_after_cart' );
  @endphp
@endsection

I wonder what I’m missing or doing wrong. Any help is appreciated.

Nick

If you haven’t changed the HTML or class names in the templates, then I’d assume the actual CSS files aren’t being loaded.

Take a look at the DOM or the sources tab in your developer tools to see if the files are loaded.

Thats correct, lots of js files are missing when the custom template is in place. However, I have no idea why they’re not loading.

Review your templates and see if you are missing any header or footer related functions.

Referring to the example templates in sage-woocommerce, it looks like you’re missing do_action('get_header', 'shop'); and do_action('get_footer', 'shop');.

Those are not in the original cart.php so left them out. I just added them to see what happens, but no luck unfortunately

Hi @nckrtl

I have the same problem.

Did you find any solution?

No, unfortunately not. I’m editing the templates without blade support as described here Sage10 + WooCommerce, anyone got it working already?

This topic was automatically closed after 42 days. New replies are no longer allowed.