wpjohnny

Thanks, it’s working great!

Hi i-gen2013, How did you resolve the “hide cart if empty”?

Hey tieung929, any luck with this? I’m trying to do the same, and preferably not on any page but the one I want to use shop for.

leklend… For starts, here is the de-link for the product carts…

table.checkout_cart .product-name a , table.checkout_cart .product-thumbnail a {
pointer-events: none;
cursor: default;
}

(Thanks to woocommerce support)

Got it! Thanks, that works

So I changed everything in my stylesheet.css, however, the cart & checkout is still unwantingly changing orientation?? Here’s what I changed…

}
/*
Generic Styling, for Desktops/Laptops
*/
table.easy-table {
  width: 100%;
  border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
  background: #eee;
}
th {
  background: #333;
  color: white;
  font-weight: bold;
}
td, th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
}
/*
Max width before this PARTICULAR table gets bad
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table.easy-table, thead, tbody, th, td, tr {
		display: block;
	}

	/* Hide table.easy-table headers (but not display: none;, for accessibility) */
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	tr { border: 1px solid #ccc; }

	td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
	}

	td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}

	/*
	Label the data
	*/
	td:nth-of-type(1):before { text-align:left; content: "Model No."; }
	td:nth-of-type(2):before { text-align:left; content: "Axles/Brakes"; }
	td:nth-of-type(3):before { text-align:left; content: "Carrying Cap."; }
	td:nth-of-type(4):before { text-align:left; content: "Tire"; }
	td:nth-of-type(5):before { text-align:left; content: "Weight"; }
	td:nth-of-type(6):before { text-align:left; content: ""; }
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) { #small-screen {display:none;}}

Thanks Tobias,

Here’s the link to the responsive grid… https://boattrailersforsale.co/premier-painted-trailers/
As you make your screen smaller it will change the so the rows / column are re-oriented and easier to read on mobile devices. The problem is I’m trying to stop this from happening on the CART & CHECKOUT pages:
https://boattrailersforsale.co/cart/
https://boattrailersforsale.co/checkout/
As the grid collapses & re-orients on the cart & checkout pages, it messes everything up.
Thanks for your help!

Hi TobiasBg,

I managed to set-up a responsive row/column changing table for pages on an ecom website, they work great, however, when I go to the shopping cart, it is still hooked up to this manipulated table. Any idea how I get the woocommerce shopping cart to not turn into the manipulated table? Here is the css for the table:

}
/*
Generic Styling, for Desktops/Laptops
*/
table {
  width: 100%;
  border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
  background: #eee;
}
th {
  background: #333;
  color: white;
  font-weight: bold;
}
td, th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
}
/*
Max width before this PARTICULAR table gets bad
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, tdd, tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	tr { border: 1px solid #ccc; }

	td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
	}

	td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}

	/*
	Label the data
	*/
	td:nth-of-type(1):before { text-align:left; content: "Model No."; }
	td:nth-of-type(2):before { text-align:left; content: "Axles/Brakes"; }
	td:nth-of-type(3):before { text-align:left; content: "Carrying Cap."; }
	td:nth-of-type(4):before { text-align:left; content: "Tire"; }
	td:nth-of-type(5):before { text-align:left; content: "Weight"; }
	td:nth-of-type(6):before { text-align:left; content: ""; }
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) { #small-screen {display:none;}}

Anyone know how to remove (de-link) the “image product link” and “product link” from the cart page?

Hi Tyguy7,
Could you share your contact info in you are available for development? I may need a similar product.

Thank you TobiasBg

Hey guys,
I need to make a form that collects inputs & makes some calculations that will have a search that will find the corresponding variations of part numbers and products of the calculation results. Could anyone point me in the right direction? Is there a WP plugin that can be manipulated to do this?