I'm just trying to move and change styling to a button on a single product woocommerce page. The button is "continue shopping (SEGUIR COMPRANDO in spanish)".
What I want is to have both buttons together and horizontal, and, if it's possible, with the same style (transparent with black border). To explain myself better, I attach an image. The product link is: https://maikaihealthyfood.es/producto/combo-guacamole-chips-de-platano/
this is how it looks actually (https://i.stack.imgur.com/qW6Nf.png)
this is how it should looks (https://i.stack.imgur.com/xXxhZ.png)
Thank in advance!
This will help you fix your problem..
// add this in footer in script tags
jQuery(document).ready(function(){
$(".btn-atc").addClass("seguir-btn");
});
/* add this to your css */
a.btn-atc.seguir-btn {
margin: 0;
padding: 14px 20px;
}
Related
I want change the main menu of Avada Wordpress Theme in the header to be left-aligned not right,
it is like this:
and I want it to be like this:
How can I do that in the CSS?
Notes:
I did that using the CSS, but the problem that it is not working in all screen sizes when I tested it, I did that with this code:
.fusion-main-menu {
position:static;
text-align:left;
margin-left: 0px;
margin-right: 30%;
margin-top:4px;
}
but it is not made it fixed aligned to the left with the same space in all screen sizes :(
Avada has option of create "Layout Builder".
With this option, you can create global header with avada page editor as per your need. And keep button out side of navigation to maintain left right position.
Using CSS Only :
Use .fusion-main-menu { float: left; padding-left: 50px; } and use JS to get last button to out of nav tag. and apply float:right to that buttton.
jQuery( ".fusion-main-menu li:last-child" ).wrap("<div class='cst_btn'></div>"); jQuery(".cst_btn").insertAfter(".fusion-main-menu"); Make sure you have menu with ".fusion-main-menu" class only once on page else use diff class or ID.
What is the correct way to hide only the view Button at My account/orders
Any help at all would be much appreciated.
This is difficult to answer without seeing any code, but assuming you are using WooCommerce out of the box, this CSS rule should work for you:
td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions, th.woocommerce-orders-table__header.woocommerce-orders-table__header-order-actions {
display: none;
}
Instead of blanking out the entire table cell where other link buttons may exist for invoices, etc. just take out the View button:
.woocommerce-button button view {
display: none;
}
guys I have a website on WordPress where I want to hide reviews tab on all product pages, currently I am using CSS hero to make changes but it applies only on the single page. I couldn't find a way to hide it on all pages, I can just do it by the changing element.style from block to none in inspect element, But I don't know how to apply it on my website. Here is the screenshot of the problem
Add this code to one of the public CSS that exist in all Pages.
.tab-content.tab-reviews {
display:none !important;
}
Do you have the same class name on other product pages too? If so, one way is to add a style:
.tab-reviews {
display: none !important;
}
classes may be repeated but ID's must be unique , please add your style with id like below
#content_tab_reviews {
display:none !important;
}
This will hide the class tab-content completely.
.tab-content{display:none !important;}
I'm currently building a website as a whole sale website. I'm having trouble getting a PNG to work as a button. WP Ecommerce comes with an automatic "add to cart" button on all of their pages. I'm having the hardest time figuring this out. I did this to my directory so far.
changed a custom "add to cart" PNG to the images directory.
Went to the default.css page and changed:
input.wpsc_buy_button{}
to:
input.wpsc_buy_button{
background-image: url(images/addtocart.png);
}
I don't know exactly what Im doing wrong. Maybe I didn't echo it on the product page? I feel like it should have because I kept the names the same.
Either way, any form of help would be awesome. Thanks!
A few things to note:
The class, wpsc_buy_button, is on a button, not an input.
The CSS that is putting the button in there now uses an !important tag so you must also use this and be more specific with your selector to override that style.
images/addtocart.png is not going to be a valid path to images in your media library. I'm not certain where it lives but the path is more likely to be something like this: http://inkvia.com/wp-content/uploads/2015/01/addtocart.png
Example CSS
button.wpsc_buy_button {
background: url(/wp-content/themes/mazine/images/addtocart.png) no-repeat !important;
height: 43px;
width: 180px;
}
button.wpsc_buy_button span, button.wpsc_buy_button span span {
background: none!important;
text-indent: -99999px;
}
I am trying to reproduce the lock function on posts on facebook with jquery and php/mysql.
Below is an image showing the different actions it does when clicked on.
I think you would do somehing like on hover, show a hidden div with a tooltip, on hover off remove it. On click event show another hidden div but somehow has to change the button's colors as well. When the menu div is clicked open it has a menu and if any of these are clicked it needs to send the result to backend script with ajax. After clicking an option or clicking outside of the divs it will hide all the divs, maybe it is just a click anywhere closes it so maybe a toggle can be used?
Can anyone clarify I am going in the right direction. I havent used jquery very much or javascript. Any examples of something like this or help would be greatly appreciated.
fb http://img2.pict.com/ed/9a/3a/2341412/0/screenshot2b166.png
You don't need JavaScript for the hover. Make an element that serves as your tooltip and position it above your dropdown button. Then make a parent <div> for both. Your HTML should look something like this:
<div id="container">
<div id="button">...</div>
<div id="tooltip">...</div>
</div>
Once you've done that, you can use CSS to position the tooltip and show it when necessary.
#container {
/* All child elements should be positioned relative to this one. */
position: relative;
}
#container #tooltip {
/* Hide by default. */
display: none;
/* Place the tooltip 2px above the button. */
position: absolute;
bottom: 2px;
right: 0px;
}
#container #button:hover + #tooltip {
/* Show it when someone's hovering over the button. */
display: block;
}
To show the drop-down box, you probably will need JavaScript. Add another element to the container:
<div id="container">
<div id="button">...</div>
<div id="tooltip">...</div>
<ul id="selection">
<li>Something</li>
<li>Something Else</li>
<li>A Third Thing</li>
</ul>
</div>
Position it as you like using position: absolute and hide it using display: none. Then show it when we click on the button:
$('#button').click(function() {
$('#selection').show();
});
You can then make your sub-items do whatever they like, as long as they also hide #selection.
$('#selection li').click(function() {
// do something
$('#selection').hide();
});
Finally, you want to change the background and text colours upon hover. That's easy enough:
#selection li {
background-color: #ccc;
color: black;
}
#selection li:hover {
background-color: black;
color: white;
}
This won't work perfectly in IE 6 or (I believe) 7 - you'll need to investigate alternative solutions for that. Either use JavaScript or check out IE7.js and IE8.js.
Here is the approach I would take:
For hovering check out jQuery's hover event to change the different image states
For the tooltip there are several jQuery plugins such as qTip that you can achieve something like this
For clicking, jQuery's click event will do the trick
The dropdown will be a little trickier. You will need to use a combination of ajax methods and selector methods to change the page (i.e. the bullet)
Finally you will have to do a request of some sort when the page initially loads to find out which setting is selected, then display the selection. This could be done either with php as the page loads, or an ajax request as mentioned above.