Hallo mensen,
Hopelijk is hier iemand die mij kan helpen met een HTML/CSS code.
Ik probeer een link aanmaken op Woocommerce single product page.
De bedoeling is dat er een pop-up opengaat met een tabel. Deze gebruik ik als size chart.
Ik heb een HTML en CSS code gevonden en aangepast die mij erg aanspreekt en deze wil ik dan gebruiken op de website.
Deze zet ik hieronder!
Ik wil geen Javascript window. Die vind ik heel erg lelijk. Dus weet niet zo goed of de onderstaande code überhaupt bruikbaar is.
En stel je je voor dat ik de HTML code toch erin krijg, hoe maak ik dan connectie met style.css om het gewenste ontwerp te krijgen?
Let wel op; ik gebruik de child theme. Dus liever wil ik alles daarin.
Is er wel een manier om dit op te lossen? Alvast mijn grote dank!!!!!
P.S. Op dit moment heb ik trouwens deze code staan in function.php om de size-chart button/link laten verschijnen in de single product page (javascript code is puur een voorbeeld wat wel functioneert maar is niet echt waar ik op zoek naar ben):
add_action( 'woocommerce_single_product_summary', 'my_extra_button_on_product_page', 30 );
function my_extra_button_on_product_page() {
global $product;
echo "<a href onclick=\"window.open('https://www.nu.nl';, 'newwindow', 'width=1000,height=800');return false;
\">
Size Chart
</a>";
}
Wat ik zoek:
<code>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want USE: inline-block (for box vorm)*/
.popup {
position: relative;
position: fixed;
cursor: pointer;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0)
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 80%;
background-color: #fff;
opacity:0.8;
color: #fff;
text-align: center;
border-radius: 0px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: -400px;
left: 0%;
top: 0%;
right: 0%;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 0.8;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 0.8;}
}
table {
font-family: Roboto, sans-erif;
width: 100%;
color: #112a26;
font-weight: 100;
border: none !important;
}
td, th {
text-align: center;
padding: 20px;
border: none !important;
}
</style>
</head>
<body style="text-align:center">
<div style="color:#112a26" class="popup" onclick="myFunction()">Size chart
<span class="popuptext" id="myPopup">
<table>
<tr>
<th>Sizes</th>
<th>AU</th>
<th>USA</th>
<th>UK</th>
<th>EU</th>
</tr>
<tr>
<td>S</td>
<td>6</td>
<td>6</td>
<td>8</td>
<td>38</td>
</tr>
<tr>
<td>M</td>
<td>8</td>
<td>8</td>
<td>10</td>
<td>40</td>
</tr>
<tr>
<td>L</td>
<td>10</td>
<td>10</td>
<td>12</td>
<td>44</td>
</tr>
</table>
</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
</body>
</html>
</code>
1.227 views
