I've been searching for this for like 5 or 6 days now and nothing seems to be working...
I am trying to use the code below to hide the div "" only on woocommerce variable products... but I can't seem to get it to work.
add_action( 'show_hide_product_variable_price', 8 );
function show_hide_product_variable_price() {
global $product;
if( $product->has_child() ) {
?>
<style>
.summary-price-box {
display: none;
}
</style>
<?php
}
}
I have also tried using this line in the above code and still nothing...
if( $product->is_type('variable') ) {
So I actually solved this earlier today.
You can either achieve this using CSS like this:
.product-type-variable .summary-price-box {
display: none !important;
}
or you can achieve this using Javascript like this:
add_filter('woocommerce_get_price_html', 'lw_hide_variation_price', 10, 2);
function lw_hide_variation_price( $v_price, $v_product ) {
$v_product_types = array( 'variable');
if ( in_array ( $v_product->product_type, $v_product_types ) && !(is_shop()) ) {
return '';
}
// return regular price
return $v_price;
}
the css with hide the full "summary-price-box" and the javascript will hide only the "price range" or "From: $X.XX"
Related
I have a number of SASS variables that reference SVG icons. Below is a simplified example:
I would like to be able to loop through a list of strings and compose the SASS variable name in a way that's presented using the background style of the icon-checkbox class. My approach so far does not work. Can I anyone show me how/if this can be done in SASS.
$icon-trash-grey: "data:image/svg+xml;charset=UTF-8,<svg data>";
$icon-save-grey: "data:image/svg+xml;charset=UTF-8,<svg data>";
$icon-list: trash, save; // list of icon names
.icon-checkbox {
each $key in $icon-list {
background: url($icon-#{$key}-grey);
// other styles
}
}
Thanks in advance
The following SASS
$icon-trash-grey: "data:image/svg+xml;charset=UTF-8,<svg data>";
$icon-save-grey: "data:image/svg+xml;charset=UTF-8,<svg data>";
$icon-map: (
trash: $icon-trash-grey,
save: $icon-save-grey,
);
.icon{
#each $key, $value in $icon-map {
&.#{$key} {
background: url($value);
}
}
}
renders this CSS
.icon.trash {
background: url("data:image/svg+xml;charset=UTF-8,<svg data>");
}
.icon.save {
background: url("data:image/svg+xml;charset=UTF-8,<svg data>");
}
You can have a look, make edits or fork this Sassmeister
Try this :
$icon-list : (
"icon-trash-grey": "data:image/svg+xml;charset=UTF-8,<svg data>",
"icon-save-grey": "data:image/svg+xml;charset=UTF-8,<svg data>"
);
#each $key, $val in $icon-list {
.#{$key} {
background: url($val);
}
}
I am trying to style my odd and even posts in the wordpress loop differently. On multiple websites and forums, I have been seeing this code:
function oddeven_post_class ( $classes ) {
global $current_class;
$classes[] = $current_class;
$current_class = ($current_class == 'odd') ? 'even' : 'odd';
return $classes;
}
add_filter ( 'post_class' , 'oddeven_post_class' );
global $current_class;
$current_class = 'odd';
But this is NOT working. When I inspect, there is no odd or even assigned to my posts.
Live website: http://www.acetronaut.com
It looks like you're trying to mark your posts as odd or even for styling.
Even though it's possible to do it in both php (when you're iterating through your posts) and in JavaScript, relying on DOM structure, I personally prefer to do it where styling should be done: in CSS, especially since it has a special selector for this purpose: nth-child().
In your case, here's a CSS sample that will change the appearance of your odd posts, on front page:
.acetronaut-rem-fi:nth-child(2n) .acetronaut-post-content-rem {
background-color: #212121;
color: white;
}
.acetronaut-rem-fi:nth-child(2n) .acetronaut-post-content-rem * {
color: white;
}
The "key" part is :nth-child(2n).
And here's how this should render:
I can't quite seem to get the hover to change colour based on the category the post is tagged in.
I've added both body_class() and post_class() to the header.php as well as adding a function that adds the current post's category back to the body class -
add_filter('body_class','add_category_to_single');
function add_category_to_single($classes) {
if (is_single() ) {
global $post;
foreach((get_the_category($post->ID)) as $category) {
$classes[] = 'category-'.$category->slug;
}
}
return $classes;
}
I'm able to change the hover on all the posts by using this styling -
.portfolio .portfolio-item:hover > .hover-item{
background-color:#000000;
}
but when I add the category class nothing happens. For example -
catergory-classes .portfolio-item:hover > .hover-item{
background-color:#000000;
}
Where am I going wrong?
Here is my site. Any help gratefully appreciated
i think you for get to put a point at the first of css code
your css is
catergory-classes .portfolio-item:hover > .hover-item{
background-color:#000000;
}
but correct is
.catergory-classes .portfolio-item:hover > .hover-item{
background-color:#000000;
}
I think you missed a dot (.)
.catergory-classes .portfolio-item:hover > .hover-item{
background-color:#000000;}
And if the .catergory-classes and .portfolio-item needs to be applied on the same tag , then it should be (no spaces b/w 2 classes)
.catergory-classes.portfolio-item:hover > .hover-item{
background-color:#000000;}
You shouldn't be setting a body class, since this will be the category of the front page itself (and won't change for each item). Instead, consider adding classes to the portfolio items (within The Loop). For example:
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
$categories = get_the_category();
$category = ! empty( $categories ) ? 'category-' . $categories[0]->name : '';
?>
<li class="portfolio-content">
<div class="portfolio-item <?php echo $category; ?>">
<!-- Additional Content -->
</div>
</li>
You can then target these categories with:
.portfolio-item.category-somecategory:hover > .hover-item { }
I'm always using this method to display relevant css for the user, but I'd like to know if there was a better way to achieve this.
<?php
//MySQL request
$data = $request->fetch();
?>
<div
class="if(isset($_SESSION['id']) && !empty($_SESSION['id'])){
if($_SESSION['id'] == $data['id']) {
echo "divLoggedInUser";
}
else {
echo "divLoggedInUser";
}
} else{
echo "divNotLoggedIn";
}"
id="<?php echo $data['id']; ?>">
<!--class is used for relavant css, id for javascript element selector -->
</div>
This is not such a big problem in this example, but it becomes a mess when you have a lot of code.
I'd like to know if there's a equivalent way to do this?
Something in css like this would be so greatfull:
.div::loggedIn
.div::notLoggedIn
There isn't, either way you have to generate some code which will allow you to determine in CSS whether you style an element for logged in user or not.
If you haven't done that already, put your code in function for a better read:
<?php
function getCssUserClass() {
if(isset($_SESSION['id']) && !empty($_SESSION['id'])){
if($_SESSION['id'] == $data['id']) {
return "loggedIn";
} else {
return "notLoggedIn";
}
} else {
return "loggedIn";
}
}
?>
<div class="<?= getCssUserClass() ?>"><span class="username">Frank</span></div>
Then you can style your div and all elements inside it accordingly:
.loggedIn {
}
.loggedIn span.username {
color: #FF0000;
}
.notLoggedIn {
}
notLoggedIn span.username {
color: #999;
}
Why not present a different CSS file based on if the user is logged in and then assign generic classes to the divs that should be hidden or not.
Create 2 CSS files, loggedinusers.css and notloggedinusers.css. For your loggedinusers.css
div.showToLoggedInUser {
display:block;
}
and in your notoggedinusers.css
div.showToLoggedInUser {
display:none;
}
Then user your logged in logic to add the appropriate CSS file
<?php
$css_file = "notloggedinuser.css";
if(isset($_SESSION['id']) && !empty($_SESSION['id'])){
if($_SESSION['id'] == $data['id']) {
$css_file = "loggedinuser.css";
}
?>
<link rel="stylesheet" href="<?PHP echo $css_file; ?> />
You could set the loggedIn/notLoggedIn class on the body element, then add CSS rules that need to reference that setting like this:
div.anyOtherClass {
/* default styling */
}
body.loggedIn div.anyOtherClass{
/* logged-in styling */
}
body.loggedIn div.anyOtherClass{
/* logged-out styling */
}
I have some PHP which will output a set of images.If I write it this way
foreach( $data as $inform ) {
{if (isset($inform['file1'])) {
echo '<img src="'.$inform['file1'].'"><br><br>';
}
}
It will display the 4 different images in the array $inform['file1'] with 2 line breaks in between each, but if I want to position them on the page like this
foreach( $data as $inform ) {
if ( isset( $inform['file1'] ) ) {
echo '<div style="position:absolute; top:400px;"><img src="'.$inform['file1'].'"><br><br>
</div>';
}}
Then it displays all 4 images on top of each other, but in the right location.
I've tried styling it in css and nothing works. Can anybody help a newbie learn this?
Thanks in advance.
It's nothing to do with your foreach loop. You're literally telling the images to go on top of each other, so that's what they are doing. If you would like to add spacing to the top, put a container div around the images and do a margin-top: 400px;.
Your biggest problems here are:
You haven't explained what you want to achieve, and
You are mixing in PHP which is making a relatively simply problem seem harder to solve
The styling and positioning of elements should be managed through CSS (preferably not inline CSS).
Your PHP should be:
if( count( $data ) ){
echo '<div class="file1_container">';
# If there are elements in the $data array
foreach( $data as $inform ){
if( isset( $inform['file1'] ) ){
echo '<img src="'.$inform['file1'].'" />';
}
}
echo '</div>';
}else{
# No elements in the $data array
}
Your CSS could then be something like:
.file1_container {
position:absolute;
left:0;top:400px;right:0;
text-align:center;
}
This will position a DIV containing all the images at 400px from the origin, and the IMGs within it will be on the same horizontal line, aligned to the centre of the DIV.
Your practice is bad, but if you must:
foreach($data as $inform){
if(isset($inform['file1'])) {
echo "<div><img src='{$inform['file1']}' /></div><br /><br />";
}
}
Of course, this would add two breaks after the last one as well. You cannot have multiple items in different places using the same position:absolute, since they will all be relative to the last position:relative. Regardless, you should use CSS.
#PHP
foreach($data as $inform){
if(isset($inform['file1'])) {.
echo "<div class='someClass'><img src='{$inform['file1']}' /></div";
}
}
/*CSS*/
.someClass{
margin-top:10px;
}